Floated Elements: Different Max-Widths on Different Screens - css

Question

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 float: right; , and my content buttons are margins: auto;. 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 fill the whole screen on mobile!
How can I remove my max-width parameter when my left-floated element is in its own block (aka above everything else on smaller screens)? Here is an image to help.
Thanks so much!!

Answer 1

An example of using Media queries
Helpful website: https://css-tricks.com/css-media-queries/
Example:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles for smartphones here */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles for smartphones here */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles for smartphones here */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles for ipad here */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles for ipad landscape here */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles for upad here */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* desktops and laptops style goes here */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles for large screen here *?
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}
Add this to your css at the top, inside each {} you can change an element depending on the dimensions of the devices width. There are a wide range of varieties depending on the devices you're targeting but this is the broad spectrum.