Flexbox Help Please!

Curriculum Help HTML-CSS
#1

Hi guys,

I need some help with creating this.

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.

Thank you in advance!

#2

Could you post the image here or link it to imgur? The page 404’s

1 Like
#3

Man that sucks that it did that.

Here is the framework:

Dunno whats up lol

Here the link to the image.

#4

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.

1 Like
#5

No problem my brother. Any help is enough help. Thank you. I appreciate it.

1 Like
#6

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.

https://codepen.io/ArcticPirate/pen/LYPZONV

2 Likes
#7

Thank you so much brother. I appreciate it. I’ll have a look at your code and get it done! Closed door meditation time.

#8

Getting rid of all of that padding made a big difference. It’s looking much better. Well done.

1 Like
#9

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!