Sidebars do not show on tablet/ipad

Hello @epgb101,

Displaying 3 columns of content on the iPad may not actually display the content correctly. Therefore, by default, those columns will be placed under the main content.

Although it is not recommended to display sidebars on devices with a small width, however, I wrote a custom CSS to have it, which you can use on devices with a small width (between 960 and 1280 pixels).

Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(min-width:960px) and (max-width: 1280px) {
    .content-both-sidebars #main #content-wrap {
        display: flex ;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    
    .content-both-sidebars #main #content-wrap .widget-area.sidebar-secondary {
        order: 1;
    }
    
    .content-both-sidebars #main #content-wrap .content-area {
        order: 2;
    }
    
    .content-both-sidebars #main #content-wrap .widget-area.sidebar-primary {
        order: 3;
    }
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

And for responsive sizes, put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    /* put your custom CSS here*/
}

Or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    /* put your custom CSS here */
}

For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

I hope that helps.
Best Regards

Thank you for taking the time to explain and write that – very much appreciated as I’ve done a lot of searching and not found much. I will try it out right away ??

Thank you – that works beautifully. All that’s missing is a little space (padding) between the 3 columns on tablet (the boxes touch each other from left to right). I tried adding some padding in Customiser by altering the sidebar-content-sidebar % ratios but I think it needs added into Customizing > Custom CSS/JS. Do you have some code for that?

• This reply was modified 1 year, 2 months ago by epgb101.

Hello @epgb101,

Please share a live URL from the issue. Then I will write a custom CSS for that.
And yes, all CSS can be added to the Custom CSS/JS > CSS.

Best Regards