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

Responsive recipe page using flex, grid, and media queries

Obiny 150

@obinysol

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I opted to use 600px instead of 365px as the max-width for smaller screens. I did this because smartphones have bigger screens these days. Am I mistaken? What is the best max-width to use when deploying media queries for smartphone screens?

I also struggled with matching the colors. I usually cannot tell certain colors apart.

Community feedback

Craig 190

@cchivers

Posted

@obinysol

First things first your colors look really good. I would say that your line spacing looks a little off. I don't remember what the size is off the top of my head but I can look it up for you if you really want it.

When it comes to screen size I would keep it as small as can be and then grow it from there. Remember that you want to accommodate as many screen sizes as possible and as such go low then work you way larger.

For example I set my smallest at like 350px and then made sure that everything grew until I got to a max size that I wanted. Planning for all cases is the smallest option, is what I was taught, and then realize that you can always go bigger, but never smaller.

Marked as helpful

1

Obiny 150

@obinysol

Posted

@cchivers Thank you for your feedback. I am glad, I got the colors right. I will tweak the responsiveness and line height accordingly.

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