Floated Elements: Different Max-Widths on Different Screens

Vote count:

0

The main functionality of my site (http://kawaiiface.net) is stringent upon floats and max-widths working well. My sidebar slots are float: left; and the float: right; , and my content buttons are float: center;. Everything positions itself in relation to one another responsively on desktop screen sizes -- but on mobile, the sidebars appear above the content.

In anticipation of the algo update, I've gone ahead and added responsive containers to everything: my sidebars run a max-width: 160px; with width: 100%; to 1. keep them in the spot they should be and 2. allow them to be responsive on smaller screens. This has caused an issue, though -- where the max-width allows my containers to fit well and provide a proper UE on desktop, they prevent the slots from expanding enough to the whole screen on mobile!

How can I remove my max-width parameter when my left-floated element is floating on its own block (aka above everything else on smaller screens)? Here is an image to help.

Thanks so much!!

asked 16 secs ago

NateSirrah

1

Floated Elements: Different Max-Widths on Different Screens