Submitted 1 day ago

Responsive Recipe page main with media queries

Fran• 55

@FranciscoMi

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

What are you most proud of, and what would you do differently next time?

I finally understood how media queries work to make a responsive design. Next time I will try flexbox and grid.

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

The most difficult challenge has been to get the image to come out of its edges. It's very easy with media queries when you understand how they are used.

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

Would it be possible to get the responsive design and switch from desktop to mobile without using media queries? I would appreciate any feedback. Thanks

Community feedback

Kareem Ayman• 80

@Kareemayman

Posted 1 day ago

Great Job your page looks really clean and mobile design looks great 👏

Personally I would just decrease the top and bottom margin slightly.

And to answer your question, you can definitely create a good responsive design without media queries. I recommend learning about flexbox and CSS Grid especially with functions like auto-fill and auto-fit, and starting to use percentages, rems and ems more instead of pixels, that should help with the responsivity of the page without media queries.

Marked as helpful

Fran• 55

@FranciscoMi

Posted about 21 hours ago

Thanks a lot @Kareemayman.

Yes, Flexbox and Grid are much more effective solutions. Especially now that they are working in current browsers.

And using em and rem is good advice.

Thanks

Caio Azevedo• 190

@justCaioDev

Posted 1 day ago

Great work! 👍

Just be careful with the font weight. Try learning about display flex. It helps a lot with responsiveness and your life will change after learning. Afterwards, I also recommend learning about display grid.

Fran• 55

@FranciscoMi

Posted about 21 hours ago

Thanks @justCaioDev

I have not yet mastered Grid completely. So I will look for a project to learn it.

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