DEV Community

lolleri200
lolleri200

Posted on

Need help with CSS Flexbox

So I am trying to make a responsive page using Flexbox, but when I view the page with a smaller device the text and picture of the page do not scale properly. Does anyone know how to fix this issue?

https://codepen.io/Sampsa96/pen/poyNreJ

Discussion (5)

Collapse
zelcus profile image
Zelcus • Edited on

Well since you set direct pixel values on your widths they will always remain that size. A section with a width 450px will always have a width of 450px no matter what the screen size is.

So trhe solution is remove all the hard-coded values with an exact set width.
You also want to add these rules to the parent class for your sections.
** display: flex;
flex-wrap: wrap; **

And to the section classes:
** flex: 0 50%; **

I also see no point in having your two sections with two different class names since you want them to behave the same.

Collapse
lolleri200 profile image
lolleri200 Author

Thanks for the help, but it didn't seem to work. The page is still not scaling.
codepen.io/Sampsa96/pen/oNxzrMW

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?