P
Matt Studdert• 13,611
@mattstuddert
Posted
Great work on this Dan! 👍
Here are a few tips for you after taking a look at your code:
- I would recommend never using IDs for styling purposes. They're overly specific and also can't be reused on the page. Here are a couple of articles on it from CSS Tricks and Dev.to if you would like to dive in further.
- Also, take a look into using HTML5 semantic structural elements in place of some
div
elements. They add much more meaning to your markup. - On mobile you're currently setting the
height
of each grid area, like below:
#container #top {
height: 25%;
margin-bottom: 5%;
}
Be careful when setting the height
on elements as it can force them to be smaller than the actual height of the content within, which leads to the content overflowing the parent element. I would recommend just adding padding
to the parent element and letting the height be dictated by the height of the content inside.
I hope those tips help. Keep up the great work!
0