Sidebar color in mobile view

[Minna]

I have my sidebar color set to rgb(75, 149, 153)

However it’s white in mobile view on the individual posts page and I can’t find a way to fix it.

[tristup]

Hi Minna,

Thanks for reaching out.
The color set to the Sidebar applied to the Body and as the Sidebar does not have any specific color, it takes the Body background color. But in small screens devices, it takes Container background color which is set to white. I would suggest you add the following code into the Theme Options > CSS to set the sidebar color only for the small screen.
You may need to adjust padding or margin after adding the following custom CSS code.

@media (max-width: 978.98px)
{
    .x-main.right, 
    .x-sidebar.left, 
    .x-sidebar.right
    {
        background-color: rgb(75,149,153);
    }
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Minna]

Thank you, however the code only changed background color on on the category header, under the category name. The sidebar below is still white

[tristup]

Hi Minna,

I checked the category page and the header comes due to the Body background color and that is why it is visible in all screen sizes. Whereas I checked and found that you haven’t added the given code and that is why the sidebar is still white.
NOTE: I checked the code by adding it through the Browser debugger tool, and found it is working.

Thanks

[Minna]

Ah ok sorry there was a glitch on my side and the page didn’t save for some reason.

How do I set the background color from side to side without the white padding? I understand you don’t help with custom CSS but taken in consideration how most people browse on mobile view these days it would be amazing if the mobile view would automatically be correct without having to code it.

[tristup]

Hi Minna,

It seems that the Site Width is set to 88% of total Width from Theme Options > Layout and Design. I would suggest you adjust the value according to your need.

Hope it helps.
Thanks