I am stuck at the part above “legal” namely the part where it contains the “main navigation”, “new releases”, “promo #”, etc.
I am using flexbox at the moment because I have not started learning grid. Maybe grid would be better for that particular section.
Here is the link to my codepen for anyone willing to take a look and help me out.
So basically any help with coding the section I’m stuck on would be appreciated. Also if anyone is willing to give me some tips on where and how I can clean up my code better for example but not limited to using less divs, organizing my html and css better, etc. would be just as appreciated.
Hello,
It’s a bit late for me to have a proper look (01:16 am here).
Flexbox should be fine.
First of all give your containers meaningful IDs or class names. container_1, container_2 don’t help much.
Instead of using lots of padding, try using height or min-height, or width or min-width, and flex-basis instead.
I need to sleep. Sorry I can’t help much more right now.
Like @leebut said, Flexbox is fine. I’ve created a pen which might steer you in the right direction. The key takeaway is you only really need to define display: flex on an item in order to unleash the power of flexbox for most situations.
If you want to use other properties like flex-grow, shrink etc then you grab them when you feel necessary, but the following codepen will show you how easy it is to create rich layouts with minimal code.
Thanks to all of you for the help. I finally managed to do it with all your help! I appreciate it so much! Its now updated and almost the same as the wireframe. I just need to figure out how to vertically center some stuff then I completed my goal! Thanks again guys!
