Responsive QRCode component design with html & css.

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • You can use the text-align property in CSS to align the text:

    .QRBody p {
        text-align: center;
    }
    

  • To add multiple media queries to deal with various mobile screens, you can use the @media rule. This rule allows you to specify different styles for different media types/devices. e.g:

    Note: This challenge does not need to use media queries.

    @media only screen and (max-width: 30em) { 
        /* Styles for devices with a maximum width of 30em =  480px */ 
    } 
    @media only screen and (max-width: 48em) { 
        /* Styles for devices with a maximum width of 48em = 768px */ 
    } 
    @media only screen and (max-width: 64em) { 
        /* Styles for devices with a maximum width of 64em = 1024px */ 
    }
    

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    Using flex:

    body {
        background-color: #d5e1ef;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

    Using grid:

    body {
        background-color: #d5e1ef;
        min-height: 100vh;
        display: grid;
        place-content: center;
    }
    

    Using flexbox and margin:

    body {
        background-color: #d5e1ef;
        min-height: 100vh;
        display: flex;
    }
    .QRCodeContainer {
        margin: auto;
    }
    

  HTML 📄:

  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • You should use a CSS reset to remove the default browser styles and make your page look the same in all browsers.

    Popular CSS resets:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  10

  Marked as helpful
• 

  ricar1990•20

  @ricar1990

  Posted over 2 years ago

  hola, Un saludo desde Republica Dominicana.

  Yo lo haría de la siguiente forma.

  1- Según la solución el contenedor principal no esta centrado en la pantalla completa. puedes darle al body un display: flex; , align-items:Center; , justify-content: Center; , si no se alinea le daría un flex-direction: column; ,

  2- Tienes que darle un tamaño al contenedor con clase .QRBody pues si no le das un tamaño el contenedor crecerá de acuerdo al contenido, ve dándole un tamaño hasta que veas que el contenido quede igual a la imagen de ejemplo. También debes darle tamaño al h1 y los demás elementos. Tienes que utilizar el inspector para que puedas observar el tamaño de cada elemento porque mucha veces queremos centrar algún elemento dentro de un contenedor sin espacio interno disponible para poder centrar y ese espacio lo conseguimos asignando tamaño al contenedor.

  10
• 

  Mohmed elshaarawy•830

  @MohmedElshaarawy

  Posted over 2 years ago

  Hi, dandamudi2 Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  HTML

  Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS

  Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!

  Happy coding

  14