Skip to content
Submitted about 1 month ago

Responsive CSS Layout for Recipe Page (Formatted for Desktop & Mobile)

Vincent Dao•100
@Squ1nty
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 most proud of being able to finally incorporate a media query to begin exploring responsive design. I managed to match the mobile design fairly well and have a highly responsive layout. However, asides from that milestone, I think next time I will cut down some of my CSS, looking back it seems that I have quite a bit of redundancy in my CSS code.

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

I encountered a slight issue with chrome devtools when trying to view my project at a smaller screen size, but that resolved itself pretty quickly. Asides from that no issues arose at all.

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

Any CSS tips are of course greatly appreciated, especially if it has to do with common practices that I am overlooking/ not implementing.

Community feedback

  • Jas•210
    @ajasmine94Posted about 1 month ago

    Hello! Great job in making it almost identical!! A little bit of what I noticed in your CSS script is the following:

     .recipeInfoContainer{
    padding: 0 2.2rem 0 2.2rem;
  }
  .ingredientsContainer{
    padding: 0 2.2rem 0 2.2rem;
  }
  .instructionsContainer{
    padding: 0 2.2rem 0 2.2rem;
  }
  .nutritionContainer{
    padding: 0 2.2rem 2.2rem 2.2rem;
  }

    since 3/4 of these has similar padding, you can actually class them together, like just using a class called section-container or something and then putting the padding css there, in that way you can just use the same class on your HTML / div elements.

    I think flexbox might also help in shortening your script, you can check it out here

    Hope this helps! Have a good day

    1
    Vincent Dao•100
    @Squ1ntyPosted about 1 month ago

    @ajasmine94 Thanks! I reckon next time I'll put more of a focus in going back and making my CSS more concise by grouping common styles together as you mentioned. Thanks again for the feedback!

    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