Skip to content
Submitted about 2 months ago

Mobile-first solution using css flex property

joyafrikaana•70
@joyafrikaana
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

What challenges did you encounter, and how did you overcome them?

I learned about using the CSS flex property and media query. When I used the CSS flex property alongside fixed width, my project wasn't centered, but as soon as I removed the fixed width, my project became centered. Also, my mobile version was wonky even though my codes were right. I realised the problem was the order. I had placed the mobile media query before the tablet media query. The solution was to put the mobile media query before the tablet media query.

What specific areas of your project would you like help with?

I currently need help in understanding the relationship between css flex property and fixed width.

Community feedback

  • Manish•100
    @manish2120Posted about 2 months ago

    I'm not good in semantics or styling, but here are some points I’ve noticed hope its correct :) :

    Regarding HTML:

    1. You should use semantic tags like <main> and <footer> here to properly define your main content and content information.
    2. In your boilerplate code, it's better to place the `stylesheets before the closing </head> tag.

    Regarding CSS:

    1. Consider using min-height on the body or your container elements to ensure the minimum height of the parent element or body to covers the background and i guess it will help you here to center your content.
    2. Make sure to closely follow the Figma design. This will help you create an output that closely matches the design provided.

    Overall, nice work! By the way, it's nice to see that you used an <h1> tag and applied styling to it separately. I recently got to know about it that we should use heading tags according to their levels for semantic purpose.

    Marked as helpful
    0
    joyafrikaana•70
    @joyafrikaanaPosted about 2 months ago

    Thanks, I recently understood the importance of semantic tags and I'd ensure I incorporate it henceforth. Also, thanks for the comment on min-height, it was quite helpful. @manish2120

    0
    joyafrikaana•70
    @joyafrikaanaPosted about 2 months ago

    Thanks, I recently understood the importance of semantic tags and I'd ensure I incorporate it henceforth. Also, thanks for the comment on min-height, it was quite helpful. @manish2120

    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