Design comparison
Solution retrospective
The design was quite simple. There was nothing that was too difficult as such.
What specific areas of your project would you like help with?On pc the site looks fine but on mobile screen it doesn't look exactly like the design image. I think I need a good understanding of how to make changes depending on device. I have to understand the usage of media tag too. I will be needing someone's(Hi Dylan) advice on this matter.
Community feedback
- @DylandeBruijnPosted 4 months ago
Hiya @mayank1405,
Great job on another successfully completed project, you are on a roll!
I'll be glad to give you some friendly constructive feedback:
- Try to give your elements more descriptive classnames:
<div class="b"> <h2>Ingredients</h2> <ul> <li class="li">2-3 large eggs</li> <li class="li">Salt, to taste</li> <li class="li">Pepper, to taste</li> <li class="li">1 tablespoon of butter or oil</li> <li class="li">optional fillings; cheese, diced vegetables, cooked meats, herbs</li> </ul> </div>
When someone is reading through your code it's hard to understand what
class="b"
means exactly. Try something like this as an example:<div class="ingredients"> <h2 class="ingredients-title">Ingredients</h2> <ul class="ingredients-list"> <li class="ingredients-list-item">2-3 large eggs</li> <li class="ingredients-list-item">Salt, to taste</li> <li class="ingredients-list-item">Pepper, to taste</li> <li class="ingredients-list-item">1 tablespoon of butter or oil</li> <li class="ingredients-list-item">optional fillings; cheese, diced vegetables, cooked meats, herbs</li> </ul> </div>
This will make it easier for you to make sense of your code and to style it, as well as other developers to read it. Very important if you work in a team.
- At the moment your card scales with the viewport and from my understanding you don't want this. You want the card to stay centered and shrink when the viewport gets to small. So I suggest the following changes:
.whitebox { max-width: 450px; width: 100%; background-color: hsl(0, 0%, 100%); display: flex; flex-direction: column; border-radius: 20px; padding: 2rem; }
I removed some properties and added some properties, make sure to compare your code and this code. This code makes sure you card has a
max-width
while still allowing it to shrink when it gets to small. Onblock
elements you don't need to setheight: auto
they already have this by default. I also removedjustify-content: center
andalign-items: center
. These are not needed. I suggest you read up about the properties and what they do exactly, it's important to know what properties do before applying them! Also I would not use percentages formargin
andpadding
in this example.-
I suggest adding
min-height: 100vh
to thebody
so it's always100vh
at a minimum while still being able to grow. Also try adding somepadding
at the top and bottom of thebody
so the card has some space to breath. -
At the moment the card is not responsive, I recommend reading up on media queries on how to achieve this. Try experimenting with them. The
max-width
andwidth
set on the card in combination with media queries should be enough to make it responsive. Try to compare the screenshots for desktop and mobile to check exactly what's happening.
I hope you find my feedback helpful, as always I would appreciate it if you could mark my comment as helpful when it was!
Let me know if you have more questions and I'll try to answer them.
Marked as helpful0 - @omlan99Posted 4 months ago
Your code looks great. You did an awesome job. Your paragraph color can be changed to hsl(30, 10%, 34%); to match the design.
Marked as helpful0
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