Skip to content
Submitted 3 months ago

Solution to the Recipie Page using FlexBox and GridLayout

Yujan Bajagain•170
@GamingClaus
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 am proud of the whole thing that i have done because this is my first type trying out the challenge and next time i would want to do it better

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

while doing this challenge I faced a lot of difficulties like doing the mobile version layout as well as setting up the image that covers the div in the mobile layout and I still think its imperfect and can be done better but i am still proud of it

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

i would like a help with the mobile version specifically because of the problems i encountered while doing it also i was new to this whole thing.

Community feedback

  • Jani-B•370
    @Jani-BPosted 3 months ago

    Hello,

    This looks good :) You were saying that you had some issues with the mobile version image that it does not cover completely the div. I noticed that you had 5px margin on the img. If you remove that on the mobile then it should be fine.

    I noticed that on the around 425px size (mobile) the page breaks a little because the nutrition table element. You can change the padding for that and the problem should go away. You can add second media query with different with to fix this kind of problems if you want.

    I have also been struggling a lot with my own pages going wrong on the mobile version. One very good way to avoid this is to make the site first mobile size and the with the media queries make it fit the bigger screens.

    From my opinion your code and site looks very good.

    Marked as helpful
    0

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