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?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (5)
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.
Thanks for the help, but it didn't seem to work. The page is still not scaling.
codepen.io/Sampsa96/pen/oNxzrMW
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 havewidth: 1080px.I think you have two issues going on here:
width: 80%; that's 80% of the parent, and forarticle.pageit would mean 80% of the full screen width since its parent isbodywhich is also full-width).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 beflex: 0 50%. But even if you fix this, I think you may find yourself still running into issues due to what I outlined above.Okay, thanks for the tip I managed to fix it now!
codepen.io/Sampsa96/pen/oNxzrMW
So I should add % for my wish sections in my section parts?