Charan• 50
@CharanMN7
Posted
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
0
