Put sidebar on the right

Support
#1

Hello,

is there a way I can put the sidebar on the right when going to mobile? even if it looks super small.

#2

Hi Nasha,

To better assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

#3

http://jillshalvis.nashalamadesigns.com/blog/

here it is!

#4

Hello Nasha,

Thanks for providing the information. Please be advised that by default we have designed the layout responsively. The sidebar will collapse and display stacked below the content area so that there will be enough space for both the content area and the sidebar contents in smaller screens. In which screen size you wish to display the sidebar on the right? If you want to display it in ipad or tablet screens, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width: 768px) and (max-width: 979px){
  .x-main {
    width: 69.536945%;
  }
  
  .left {
    float: left;
  }
}

We would loved to know if this has work for you. Thank you.

#5

I’m using the code you send me but it is not working :frowning:

#6

Hi Nasha,

Upon checking your link, I’m getting 503 service unavailable error page on your site, which means your site is down. I would suggest you to contact your hosting provider to resolve this issue first.

Once the issue is resolved, update this thread so that we can assist you further.

Thanks!

#7

the website is back up, please check again!
thanks

#8

Hello Nasha,

Please try this code:

@media(min-width: 768px) and (max-width: 979px){
  .x-main.left {
    width: 69.536945% !important;
    float: left !important;
  }
}

Hope this helps.

#9

Nothing :frowning:
Still on mobile it is not showing the rightbar on the side, I really don’t mind if the blog looks small as loon as the sidebar goes to the right

#10

Hello Nasha,

Thanks for updating the thread. :slight_smile:

Looks like there’s a cache issue on the website as I don’t see the code shared by my colleague Jade on the website. Can you please make sure to clear cache and see how it goes?

Please try out following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .x-main.left{float: left;width: 230px !important;}

}

Next, I also see following code on the website that’s causing sidebar not to display on the website. Sharing the screenshot in secure note. Please remove margin-top property from following code.

.x-sidebar.right {
    float: right !important;
    width: 150px !important;
    margin-top: -12700px !important;
}

Thanks.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.