- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m trying to get this website to align centrally but when it collapses down to mobile size the image scales down still when the text goes underneath it, it think it’s being bumped because i have a 50% width on it but I cannot seem to figure out a way to not do that…… I’m wanting the image to scale with the sides of the page and not with the 50% whitespace on the side.
Here is the codepen, please let me know if you have any questions!
i think it’s being bumped because i have a 50% width on it but I cannot seem to figure out a way to not do that
Correct, and the way to do it is with media queries. I don’t see them in your example so you should check them out in Google to learn more.
With a media query in place, you can set a breakpoint where you can define different styles. I expect you’ll want to void the left float and 50% width on .posterimageleft. Also kill the float and current widths on the img within (although max-width:100%; should help with fluid scaling)
Is there a way to do this without media queries?
Yes – with flexbox http://codepen.io/anon/pen/OXZGzv
Don’t forget vendor prefixes http://shouldiprefix.com/#flexbox (you can also change the CSS settings in the pen)
What’s the issue with media queries though?