Frontend Mentor | Charan's profile

@samellow

Submitted 5 months ago

What are you most proud of, and what would you do differently next time?

I was able to go close to the design specifics for desktop.

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

I did not do the mobile design - it was a bit challenging. Styling the lists was also a challenge

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

Mobile design and styling lists

@CharanMN7

Posted 5 months ago

Hey Samuel!

Saw you needed a little help with Mobile design and styling lists. Here are a few things that'll help:

For the mobile design,...

Remove the top and bottom margins of your content container
For the image to go full width, you can remove the padding of your content container and add margins to the <div> tags that you created for the different sections of the content.

For styling the lists...

You can play with the padding property of the <ul>, <ol>, and <li> tags until it feels right

Here are some other things you may want to consider...

I see that you used a list for the "Nutrition" section. You could replace that with a <table> instead, that would make it easier to style that part of the webpage
I see that you used a lot of <div>s and <h1>s inside them. It is usually recommended that you use only one <h1> tag per page. To give more sematic meaning to your code, you can replace your <div>s with <section> tags (which behave exactly like <div>s) and change the <h1>s to <h2>s inside them.
Also, looks you missed using font-family: "Young Serif" for the headings.

Hope it helps!

Marked as helpful

All comments