Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

#206796
xebico
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….