Home › Forums › CSS › [Solved] Swapping the locations of two divs in a media query › Reply To: [Solved] Swapping the locations of two divs in a media query
August 20, 2015 at 12:07 pm
#206796
Participant
Drat. Didn’t work and I can’t explain why. I’m guessing I’m not understanding your instructions well enough.
In the HTML file I have something similar to this:
<!-- SIDEBAR ----------------- -->
<div id="sidebar">
SIDEBAR STUFF
</div>
<!-- MAIN -------------------- -->
<div id="left">
MAIN BAR STUFF
</div>
My CURRENT stylesheet’s media queries (again, simplified for here):
@media all and (min-width: 800px) {
body {width: 100%;}
html {font-size: 15px;}
#sidebar {width: 25% !important;}
#left {width: 75% !important;}
}
@media all and (max-width: 799px) {
body {width: 100%;}
html {font-size: 14px; width:100%;}
#left { width: 100%; }
#sidebar {width: 100% !important;}
}
You’re suggesting I swap the sidebar and mainbar in my HTML and change the media queries to
@media all and (min-width: 800px) {
body {width: 100%;}
html {font-size: 15px;}
#sidebar {width: 25% !important; right: 75%; left: auto; }
#left {width: 75% !important; left: 25%; right: auto;}
}
@media all and (max-width: 799px) {
body {width: 100%;}
html {font-size: 14px; width:100%;}
#left { width: 100%; }
#sidebar {width: 100% !important;}
}
I’m sure I missed something there….