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

Recipe page with pure CSS

frontpro 70

@frontpro

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
JackEG 90

@Yakub357

Posted

Solution is great. Only one thing I wouldn't add to the styling, limiting the height of the box, in this case body or main, you may just adjust the width, and the height should be as much as client's browsers estate.

One more thing, about responsiveness, when on mobile view, the img of the recipe seems to transform weirdly, it may be because you are setting it's height, usually img tags styled as: width: 100%; and wrap it to external div, and then give the height to the img-wrapper. and that way, you may keep the aspect ratio of the img.

Marked as helpful

1

frontpro 70

@frontpro

Posted

Thanks for the tip you gave me, it's really helpful I appreciate it ☺️@Yakub357

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