Force the Side Bar to Appear Below Page Content on Mobile?

Darter02

I'm redesigning parts of my site. They're not ready to be shared, so I can't provide a link just yet. On the page, I'm using a side bar to display certain navigation content. On a desktop computer the layout works well, with the page content on the left, and the side bar content on the right.



On mobile devices though the side bar appears first, and then you have to scroll down the see the page content. I'd like this to be in reverse, with the page content appearing first on mobile, and then the side bar content.



Does anyone know of a method to achieve this?

bobbyhero

Unfortunately, not aware of a way to force this. The mobile view is automatically configured, so it usually requires a change of your non-mobile design. Someone else may have another opinion.

leftquark

Ron, the following CSS code should do the trick for you. Let me know if it doesn't work -- it's fairly complex to dive into and although I tested it, I could have missed something:

/* On mobile make sure the right bar is displayed second */
@media screen and (max-width: 670px)
.sm-page-layout .sm-page-layout-region-body {
  display: inline-flex !important;
  flex-direction: column-reverse !important;
}

Darter02

Wow! You rock! I'll try this out later, when I'm free. Thanks!

Darter02

I'm afraid it did not work. I tried placing the code both in a CSS block on the page, and then in the theme's CSS. Neither place panned out. Thanks though. I guess I'll have to rethink how I want to present things.

If we had a content block that acted as a "container" for other content, like the sidebars do, it'd help with design. A container block we could place anywhere on a page, filled with whatever we wanted, imagine...

leftquark

Ron,
My apologies, I had a slight bug in the code that prevented it from working. The code below should work. I've added a CSS block to your Homepage with those code and tested it on your homepage and it makes it so that the "Essentials" section comes before the right sidebar "Experience." If that's not what you wanted, feel free to delete the CSS block (or let me know and I'll delete it).

I see you changed your wedding page to not have the right side bar. If you still wanted that, you could use this code to make it work how you requested above

/* On mobile make sure the right bar is displayed second */
@media screen and (max-width: 670px) {
  .sm-page-layout .sm-page-layout-region-body {
    display: inline-flex !important;
    flex-direction: column-reverse !important;
  }
}

I should be around for a few hours in case you reply and would like me to remove the CSS block that I added. I'll be away from the computer for a bit after but will check my email to see if you reply

Darter02

Thanks man. The wedding page you see is not the one I am redesigning. My homepage is not the target of this particular project at this time, but it too is being redesigned. First I need to work out the interface of my "money making" page. Your help is truly appreciated.

And to those SM folks, I still want that container block.

Darter02

Nice job by the way. I just took a look at my home page via mobile. That code is working. When I saw that you were hired by SM I was happy for your success. You do good work.

leftquark

Darter02 wrote: »

When I saw that you were hired by SM I was happy for your success. You do good work.

Thanks! It's been an amazing first 3 months. Pretty much dream job come true! And I love to help you guys so it's a win-win for everyone!

Darter02

Here's an issue that someone reviewing the site on an iPad noticed. Apparently the sidebar & content became squished together making it difficult to read my site, and it looked terrible.

The original code:

/* On mobile make sure the right bar is displayed second */
@media screen and (max-width: [COLOR="Red"]670[/COLOR]px)
.sm-page-layout .sm-page-layout-region-body {
  display: inline-flex !important;
  flex-direction: column-reverse !important;
}

That seemed to work on my Droids, but apparently it doesn't work on the iPad which is 980px (right?). I've swapped the 670 for 980 but don't know if it worked as I don't have an iPad. Anyone with a better understanding, or an iPad? You can just click the site in the signature below to open the page I'm working on.

Darter02

Here are screen shots from a user with an iPad Air 2.

leftquark

That's what it looks like on the iPad when I just looked at it. Would you like it to look any differently?

Darter02

When viewed on a Galaxy tab the sidebar is forced to below my content.

It looks like this.



I'm trying to figure out why it doesn't work on the iPad. It's making a tad batty...

leftquark

We have what I call 2 types of ways of displaying your page, what I call:
1) Desktop View: This is what you'll see when viewed in a computer with a monitor.
2) Mobile View: This is a shrunk down version of the page that is formatted to display on mobile devices.

Tablets fall into a little bit of a grey area in between. Is it a tablet big enough to display the Desktop view so that it's still readable or should it take on the mobile view?

We determine which version to load based on screen width*. If the screen width is <640 pixels we will display the mobile view. If it's >640 pixels we will display the tablet version.**
** (we're going to push a change shortly that increases this to 670 pixels so that iPhone6 will properly display as a mobile device).

* The other thing we take into account is the pixel density of a device. iPad Air's, for example, with a retina display, have more pixels per inch and therefore if we went by # of pixels alone, 640 pixels would look a lot smaller on an iPad Air 2 than it would look on an original iPad. Screen's with high density displays (like the retina display on the iPad Air) get a multiplier that can make it load the desktop display since it has the room to display it.

The Galaxy Tab has only 600 pixels for its width when held in portrait orientation and thus will display as a mobile device.
The iPad Air has 760 pixels for its width when held in portrait orientation and thus will display as a desktop device.

If you let me know which way you want them to display I can help make it so!

Darter02

Thanks for the good explanation. I did not know it was a retina display as I don't have any Apple products. I switched it to 980px but then the user sent me that screencap. If you could help me sort this out that would be great. I want her device to convert to the mobile version, where we force the sidebar to the bottom.

Darter02

I changed my code to:

/* On mobile make sure the right bar is displayed second */
@media screen and (max-width: [COLOR="Red"]1024[/COLOR]px)
.sm-page-layout .sm-page-layout-region-body {
  display: inline-flex !important;
  flex-direction: column-reverse !important;
}

Would that work? Or would it still scale incorrectly? I don't have an iPad Air to test it on.

AceCo55

You can check for yourself by using "Quirktools": http://quirktools.com/screenfly/
This allows you to put in your web address and then select different screen sizes, tablets, mobile phones to see what it looks like.

Darter02

On that site this is what the iPad view appears to be. It's different than the actual screen shots a user sent me, which I embedded in a post above. I'm guess it has to do with the cursed retina display.

leftquark

You've done a good job getting the iPad to display how you want it, although I noticed there was a slight issue in that the page wasn't taking over the space of the right side-bar ... it was being squished into the left half of the screen. I've updated your site so that it fills the full iPad screen. Lookin' all good now!!!

Darter02

Woo HOOO!!! Thanks!

Darter02

leftquark wrote: »

I've updated your site so that it fills the full iPad screen. Lookin' all good now!!!

Do I need to know the details of that fix in case I build another section similar to this one?

leftquark

I stuck this code in:

/* on Tablets make sure things look right */
@media screen and (min-width: 671px) and (max-width: 980px) {
  /* Make the site fill the width of the screen */
  .sm-page-layout-region-body .sm-page-layout-region-center .sm-page-layout-region-center {
    margin-right: 0px !important;
  }
  
  /* Make the right side bar fill the width of the screen */
  .sm-page-layout-region.sm-page-layout-region-right {
    width: 100% !important;
  }
}

Essentially the main part of the page was leaving room for the right sidebar. The first part of the code gets rid of the room for the sidebar so that the content stretches the whole screen.
The second part of the code makes it so that the right sidebar, which is now below the main body, takes up the full screen.

Darter02

So this codes needs to go on every page I have laid out like this? Correct?

If so, it would be a lot easier if we had a way to create page templates.


edit: Oh, thank you once again!

leftquark

Darter02 wrote: »

So this codes needs to go on every page I have laid out like this? Correct?
Yep. Although you could actually just put it into your Theme's advanced Customization (click the wrench on your theme, click the advanced tab, and at the very bottom you'll find a CSS button).

Darter02 wrote: »

If so, it would be a lot easier if we had a way to create page templates.

I think we're all in agreement here on dgrin that this would be useful. Making that happen with the rest of our priorities is the trickier part! It's on my list of things I'd love to do one day.

Darter02

Thanks!