Skip to content
Submitted 3 months ago

Used Tables and divs.

Napgolden•60
@Napgolden
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Honestly, I couldn't get the sizing at mobile width to scale , hopefully someone can give me an idea.

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

My media query sizing for mobile

Community feedback

  • Yulia•400
    @YuliaLantzbergPosted 3 months ago

    Hi. Your solution has visible differences in spacing and sizing compared to the design. The reason, including the mobile scale, is probably caused by default browser stylings. You need to reset them at the beginning of the CSS file so that default styles will not give you unexpected results. Also, you use px as the main measurement and it's hard to maintain responsiveness with px. It's better to use % and rem. So that rem will be easy to use, define font-size as 62.5% in body element. So it will be 10px in the root element and rem is equal to a font-size in the root element. So it will be easy then to modify for media queries. Sometimes it is enough just to change the font-size in the root element.

    Marked as helpful
    1
    Napgolden•60
    @NapgoldenPosted 3 months ago

    Thanks for the tips will make changes to the CSS.@YuliaLantzberg

    1

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