@MikeBish13
Posted
Great job on this project. Your solution matches up pretty well to the design, so well done.
I've tried to answer your specific questions below:
-
I'm not sure what you mean by the top border of the hamburger menu, but happy to take a look if you can clarify or expand on the question
-
The easiest route to better responsiveness/less code is to style your page mobile first, ie style the mobile design first and then work upwards by including
@media
statements with amin-width
. You'll find that in the long run this will save you a lot of code. There's also another reason for you using a lot of code in this project - see below -
I think you're making this project a lot more difficult for yourself by using generic CCS classes for everything, and then trying to shoehorn the design into your CSS by using very complicated CSS selectors, eg
#grid-section .flex-container:nth-child(3) .card:nth-child(1) .display-content h3
. With a few extra classes added to some of your components, the styling would be a lot easier for you to code and a lot easier for somebody else to read. For example, the third section of your grid-section is stylistically very different to the other two sections, so why not give it some extra classes, rather than you having to use absolute positioning? For what it's worth, I think this project could easily be complicated without using a singleposition: absolute
.
Hope that helps and keep up the good work!
Marked as helpful