Skip to content
Submitted about 2 years ago

qr-code-component-main

Daud Ismail Olakunle•20
@Eminentdio
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can I interact with Mobile View style without affecting the desktop view style?

Community feedback

  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello Daud Ismail congrats on finishing the challenge!

    If you want to apply styles only for mobile device sizes you have to use mediaqueries, the problem in your project is that you are using a media querie to apply the desktop sizes from 375px, you should apply your desktop sizes at 1440px instead.

    In this project you don't need to use media querie tho, try building it for desktop with a correct width and height and you will se how it works on mobile!

    Hope my feedback helps you!

    Marked as helpful
    1
    Daud Ismail Olakunle•20
    @EminentdioPosted about 2 years ago

    @DavidMorgade

    Thank you so much, sir.

    I really appreciate your feedback. I will work on it.

    But, is that going to make it better displayed on mobile phones as well? Because it looks so horrible when I checked it on my phone. Auughh!

    0
  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi Daud Ismail Olakunle,

    Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

    • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1> visually hidden with .sr-only class.You can find here
    • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. (not describes the image).
    • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.
    • Last , It's a good practice to have the styles in separate file the reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document also it's useful If multiple pages on your site have the same look and feel.

    CSS:

    • width: 20vw;using vw units in width is not a good way as you are losing control of the layout. Consider using max-width to the card inrem instead.
    • Don't Forget Inheritance when using em for font size. So if you have nested elements with different font sizes, you could end up with a font much smaller or larger than you expect. I recommend using rem for font size.

    Aside these, great job on this one. Hopefully this feedback helps.

    Marked as helpful
    0
  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello again Daud Ismail, congratulations for your new solution!

    🎯 Your solution its almost done and I’ve some tips to help you to improve it:

    1.Remove the margin to make the correct alignment using body:

    div.attribution {
    width: 230px;
    height: auto;
    /* margin: auto; */
    /* margin-top: 70px; */
    background: hsl(0, 0%, 100%);
    padding: 10px;
    border-radius: 20px;
    text-align: center;
    font-size: 11px;
    color: hsl(220, 15%, 55%);
}

    2.Use min-height and flexbox to make the container align to the body height:

    body {
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

    3.Your component is done and the code is working, but the html markup/structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    Here’s a minimal html structure for this challenge:

    <body>
<main>
 <img src="./images/image-qr-code.png" alt="Qr Code Image" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> 
</main>
</body>

    ✌️ I hope this helps you and happy coding!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord