When viewing on mobile, my sidebar gets pushed to the bottom of the screen

[bh39302]

When viewing on mobile, my sidebar gets pushed to the bottom of the screen, this means that I get a duplicate entry to the bottom on mobile, as my sidebar and footer says the same. It also pushes the adverts from the sidebar to the bottom of the screen. Is there any way around this please.

Thank you.

[Prasant]

Hello Bryan,

Thanks for writing in!

Actually that’s how the sidebar should display on mobile devices. Can you let us know the layout you are looking for?

In case you want to display sidebar first and content later, please add following CSS under X > Theme Options > CSS:

@media ( max-width: 979px ) {
  .x-container.max.width.main .offset.cf {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
  }
 .x-main.left {
   -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
  }
  }

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[bh39302]

Hello
Thank you for your reply. Because my sidebar and footer contains the same text which starts "THIS SITE IS OWNED AND OPERATED BY NORTHAMERICANMAMMALS.COM. "

On mobile I really only want this to display once at the bottom of the page. Is this possible?

[jade]

Hey Bryan,

To do that, you can install the Widget CSS Classes plugin so that you can add a class to the sidebar widget.

Then add the classes x-hide-md x-hide-sm x-hide-xs to the sidebar widgets that you do not want to be shown on mobile.

Hope this helps.

[bh39302]

@Jade

x-hide-md x-hide-sm x-hide-xs

Excellent. Thank you Jade, that worked really well.

[friech]

You’re more than welcome, glad we could help.

Cheers!