This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Showing content area above sidebars on mobile devices with CSS

  • Creator
    Topic
  • #1641
    Jason Bobich
    Keymaster

    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 7 years, 9 months ago by Jason Bobich.
    • This topic was modified 7 years, 9 months ago by Jason Bobich.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #1661
    royeyal
    Participant

    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 {

    #1667
    Jason Bobich
    Keymaster

    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?

    #1669
    royeyal
    Participant

    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.

    #1670
    Jason Bobich
    Keymaster

    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

    #1672
    royeyal
    Participant

    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 🙂

    #1673
    Jason Bobich
    Keymaster

    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 { ...
    #1674
    royeyal
    Participant

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.