Can’t get 2 sidebars to display on desktop

  • I’m having the same problem this person had a couple years ago on this support thread:

    • https://www.ads-software.com/support/topic/display-bug-with-content-layout-both-sidebars/

      • , and I can’t figure out the css code to use to force the two sidebars on a desktop. They only appear if I hit the inspect in chrome and adjust the resolution to be wider than 1280px. I have a 15″ macbook pro and am viewing in full screen and the sidebars are not appearing where they should be when I look at the site normally without the inspector.

      I have tried everything I can think of. I added some CSS that forced the sidebars and content area to be the desired percentages, but the sidebars are still showing up underneath the content area.

      I really thought this would be super simple to spin up a site with the specifications I needed with a left and right sidebar to show when viewing on a desktop, and I don’t understand why it’s not. If you select two sidebars in the customizer, you should be able to get two sidebars on any desktop without having a device that is wider than 1280! Why is there even a need for additional css here?

      Regardless, I would be thrilled if you could just tell me what that CSS should be.

      Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter SeeJaneB

    (@janiebee83)

    Update: I just checked and under the settings for my retina display, I have it scaled to mimic 1280 X 800 so the text isn’t so tiny. Of course if I revert back to the default, the 2 sidebars display correctly (but then I can hardly read anything).

    I still would like to be able to force the sidebars to display on screens somewhere between a tablet and the 1280 breakpoint. I just need help with the CSS to do this. I’m really hoping you will be able to help me out.

    Hello,

    Can you please remove all the css code you have added to make it so that I can give you the correct code?

    Thread Starter SeeJaneB

    (@janiebee83)

    Yes, after sending the first message, I went back in and removed all the css that I had played around with so it would be back to normal.

    Thank you for your quick response!

    Amit Singh

    (@apprimit)

    Okay, kindly go to Appearance > Customize > General Options > General Settings and set content, sidebar width to fix the issue.

    Thread Starter SeeJaneB

    (@janiebee83)

    I have already tried various settings there, and I can’t seem to get the content and both sidebars to show up correctly unless the screen resolution is above 1280px. For resolutions between a tablet size and 1280, the sidebars show up below the content.

    In the support thread I linked to in my original post, this is discussed and it is a breakpoint issue that was determined to need solving with CSS, but the necessary CSS was never provided.

    Amit Singh

    (@apprimit)

    Try using the below code and check it works or not – 

    @media screen and (max-width: 1280px) and (min-width: 767px) {
.content-both-sidebars.scs-style .content-area {
    left: 28%;
    padding-left: 30px;
    border-left-width: 1px;
}
.content-both-sidebars .content-area {
    width: 44%;
}
.content-both-sidebars.scs-style .widget-area.sidebar-secondary {
    position: relative;
    left: -44%;
    padding-right: 30px;
}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary, .content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary {
    width: 48%!important;
}
.content-both-sidebars .widget-area.sidebar-primary {
    float: right;
}
.content-both-sidebars .widget-area.sidebar-secondary {
    float: left;
}
}
    Thread Starter SeeJaneB

    (@janiebee83)

    Hi @apprimit – Unfortunately, it did not work.

    Thread Starter SeeJaneB

    (@janiebee83)

    Is there anything else that might work with css?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Can’t get 2 sidebars to display on desktop’ is closed to new replies.