Classic solution

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  Hiya @AngeATT,

  Good job on this solution, it looks great!

  I'm happy to give you some friendly constructive feedback:

  • I think you forgot to set the font-family. Try setting it on the body element. Don't forget some elements have a different font-family.

  • Try putting min-height: 100vh on your body element. This makes it so the element takes up a minimum height of 100vh while still allowing the content to grow without overflow issues.

  • You have height: auto on your .container element. This is not needed as block elements already have height: auto by default. If you add more content the element grows automatically.

  • I suggest using an img tag for your image instead of a background-image. You can use object-position: center and object-fit: cover when using images to achieve the same result when using background images.

  • Try comparing the design to your solution again (especially the mobile view) and try to achieve the same using media queries.

  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 helpful

  0

  ---

  

  Attoungbre Ange François•160

  @AngeATTPosted 5 months ago

  Thank you very much, @DylandeBruijn, for your suggestions. I will look forward to taking into consideration every recommendation you made.

  1

  

  Attoungbre Ange François•160

  @AngeATTPosted 5 months ago

  I made some changes, can you take a look? @DylandeBruijn

  0

  

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  Hiya @AngeATT,

  I'm happy to see that you take the time and effort to improve your solution, that's a great mindset! I checked out your code and it looks a lot better than before! Responsive as well, props!

  A couple finishing touches:

  • At the moment the image scales well but you can see some distortion. This is because the image has a fixed height: 200px but a width: 100%. So the width is fluid but the height isn't. The image tries to fit in that box without respecting aspect ratio so to say. You could fix this by setting object-fit: cover on the image. Which tells the element to scale its content to fit the aspect ratio of the containing element while completely covering the containing element. I notice I made a mistake in my previous comment, so it should be object-fit and not object-size, sorry about that! Another way you could fix this issue is by keeping the width: 100% and removing the fixed height: 200px. The image then can scale freely without distortion!

  • Preparation time block is missing border-radius.

  • You could change the first table cells (td) in the table rows (tr) to th to make it a little more semantic. Like <th>Carbs</th>. You can also directly put the text in the td without wrapping it in a span.

  • If you want to make your CSS values more reusable I recommend reading about CSS custom properties!

  Once again great job @AngeATT, excited to see more of your progress!

  Marked as helpful

  0

  

  Attoungbre Ange François•160

  @AngeATTPosted 5 months ago

  Hello @DylandeBruijn, changed done, can you look again

  0