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

Used Tables and divs.

Napgolden 60

@Napgolden

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 320

@YuliaLantzberg

Posted

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

@Napgolden

Posted

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

1

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