Submitted 8 months ago

Recipe page

Omar• 140

@Omar-Miled

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had a difficult time with responsive design after I made the desktop version and then i realized i should make a phone version also and i had a difficult time editing it so i gave up after searching a whole day but here's the desktop version. I had difficult time choosing between whether i should do it with flex boxes or grids since still kind of learning the difference and where to implement them exactly. Any comments about my command choices and the structure of my code will be highly appreciated.

Community feedback

Marley Semende• 570

@Marley-Semende

Posted 8 months ago

Hello @Omar-Miled. Your site looks good on big screens, for smaller screens styling you can use the CSS Media queries. Below are some free resources where you can learn about media queries and how you can start using them in your projects: https://css-tricks.com/a-complete-guide-to-css-media-queries/ https://www.w3schools.com/css/css3_mediaqueries.asp And I highly recommend this free course below:

https://courses.kevinpowell.co/conquering-responsive-layouts I hope this will be helpful. Happy coding:)

Marked as helpful

Please log in to post a comment

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