Showing content area above sidebars on mobile devices with CSS

[Jason Bobich]

If you have your site setup to have a sidebar on the left side (which most people generally don’t), you’ll notice that when you site scales down to mobile the left sidebar sits above the main content area.

The following CSS snippet is an approach you can take to ensure that the content area always sits on top of the sidebars when the site scale down to the mobile viewport.

@media (max-width: 767px) {
	#sidebar_layout .row-fluid {
		display: box;
		display: -moz-box;
		display: -webkit-box;
		box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-box-orient: vertical;
	}
	#sidebar_layout #content {
		box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-webkit-box-ordinal-group: 1;
	}
	#sidebar_layout .fixed-sidebar {
		box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-webkit-box-ordinal-group: 2;
	}
}

Note: We’re targeting 767px because that is when Bootstrap clears the floated columns and begins to stack.

This should work on iOS and Android, but will not work on Windows devices.

I’m not expert on Flexbox in CSS. If anyone has a better way to do this or a way to accomplish this for Windows devices, pelase share!

• This topic was modified 8 years, 11 months ago by Jason Bobich.
• This topic was modified 8 years, 11 months ago by Jason Bobich.

Topic

[royeyal]

It seems to make the desktop browser ignore media queries for some reason, so any dev resizing the browser windows will find he can’t test the site for mobile. So, some people may wanna install the Modernizr plugin/script and add .touch class. i.e.: .touch #sidebar_layout .row-fluid {

[Jason Bobich]

I’m not having any problems like this. Everything still works fine for me in both Firefox and Chrome. What web browser are you using? Do you have a link to an example so I can see what you mean?

[royeyal]

It happens on modern browsers. I always test on Firefox and Chrome and leave the dreaded IE for last.
Check out http://oritdruker.com/ (WIP).
Site is in Hebrew, so… Here be dragons. Be strong.
I’ve removed the .touch class for the meantime.

[Jason Bobich]

So what’s an example of something on that site that doesn’t get applied because of the CSS I put above? For example, the styling on the main menu navigation toggle button in the top right is done from with @media queries and everything is getting applied to it. I see various styles on your site being applied with @media queries. I guess I’m just not quite understanding.

Here’s what I see: http://picturestack.com/122/895/QgwScreenShoty02.png

[royeyal]

Right now only Firefox is broken for some reason when resizing: http://picturestack.com/123/795/miUscreenshotkFx.jpg.

My custom CSS is all over the place right now because it’s still WIP (lies web devs tell).
Thanks for the help 🙂

[Jason Bobich]

On my end it’s not that any of your styles aren’t work in media queries, it’s just that the flexbox CSS specifically doesn’t appear to work very well in Firefox in regards to those columns.

http://picturestack.com/125/106/VDsScreenShotjhH.png

There are classes that Jump Start adds to the body tag that say what web browser you’re in. Maybe you could try applying the styles for just chrome and safari since no mobile device is using Firefox anyway.

.safari #sidebar_layout .row-fluid,
.chrome #sidebar_layout .row-fluid { ...

[royeyal]

Yeah, I’ll add those styles, or add .touch if I’ll use Modernizr.
Thanks for the great support!

[Author]

Replies