
Responsive CSS Layout for Recipe Page (Formatted for Desktop & Mobile)
Design comparison
Solution retrospective
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
- @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@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 GitHubJoin 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