DEV Community

Discussion on: Need help with CSS Flexbox

Collapse
matthewia profile image
Matthew Alicea

As Zelcus mentioned, you're still using pixel values for CSS rules like width. I still see a handful of places in your CSS such as .header, .page, section, etc. where you have width: 1080px.

I think you have two issues going on here:

  • you're not using a responsive unit such as percent (e.g. width: 80%; that's 80% of the parent, and for article.page it would mean 80% of the full screen width since its parent is body which is also full-width).
  • you're mixing float with flex, which doesn't really work.

I recommend you take a step back from your code and read up on some of the basic concepts of Flex, and then come back and rework what you have to use just flex rules, and a responsive unit like % for containers' widths as needed.

Here are a few articles I think could be useful in learning more:


P.S. I noticed a typo in what you implemented based on Zelcus' answer: flex: 0.50% in your .content_... classes should be flex: 0 50%. But even if you fix this, I think you may find yourself still running into issues due to what I outlined above.

Collapse
lolleri200 profile image
lolleri200 Author

Okay, thanks for the tip I managed to fix it now!
codepen.io/Sampsa96/pen/oNxzrMW

Collapse
lolleri200 profile image
lolleri200 Author

So I should add % for my wish sections in my section parts?