Skip to content
Submitted about 2 months ago

Responsive Recipe page main with media queries

Fran•55
@FranciscoMi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

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•160
    @KareemaymanPosted about 2 months 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
    0
    Fran•55
    @FranciscoMiPosted about 2 months 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

    0
  • Caio Azevedo•270
    @justCaioDevPosted about 2 months 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.

    0
    Fran•55
    @FranciscoMiPosted about 2 months ago

    Thanks @justCaioDev

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

    1

Please log in to post a comment

Log in with GitHub

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