Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first responsive solution using CSS Flexbox

Zephsa 10

@Zephsa

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone!

I'm not sure about how I set up the responsive width of the box. I'd like to know if there are better ways to achieve the same result (maybe without using pixels unit?). Also I'd appreciate some advice on how to "shrink" my CSS file, I mean if there's something I can delete or position differently to get a cleaner file.

Thank you all!

Community feedback

@MojtabaMosavi

Posted

Regarding you query:

  • Correct inutition (or maybe you read it somewhere!), css unit generally can be categoried as relative units and absolute unit. Pixel belongs to the letter category which are not so well suited for responsive behavior. Using relative units such rem or em gives are better choices, I would recomand using rem becausing em are a bit more diffcult to wrap you're head around since the are base depend on font-size.
  • For projects of this scope a proper section style will due but as you take on bigger projects something like 7-1 scss architecture is a good candidate for modularizing you styles. You can apply to css if you dont want to use scss or sass.

Keep coding :=)

Marked as helpful

0

Zephsa 10

@Zephsa

Posted

@MojtabaMosavi thanks for the feedback! I'll google about the 7-1 architecture to learn a bit more. Any suggestions on how to adjust the size of the box to match the original design?

0

@MojtabaMosavi

Posted

@Zephsa You can use a tool like adobe xd to masure the dimensions from the design files.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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