Fixed Sidebar Width

[Frank19]

With my current setup, as my page shrinks in width (responsive sizing) my sidebar also shrinks in width. Since our ads in the sidebar will have a fixed width of 300 pixels, this means that some users could see part of the sidebar ads cut off, which could put me at risk for an ad policy violation.

I need my sidebar settings changed so that the sidebar stays a fixed width of at least 300 pixels as my page resizes, breaking to the bottom of the page at 1023 pixels of page width. This ensures that all users on all devices see the ads properly.

How can I accomplish this?

[Alaa]

Hi @Frank19

To do that you will have to add this CSS snippet in (X > Theme Options > CSS):

@media (max-width: 1024px){
    .x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
        float: none;
        display: block;
        width: auto !important;
    }
}

@media screen and (max-width: 1200px) and (min-width: 1024px) {
    .x-main {
        max-width: 65%;
    }
}

.x-sidebar {
    min-width: 300px;
} 

Thanks.

[Frank19]

Hi Alaa,

Can you tell me if that would conflict with my current CSS snippet:

@media (max-width: 979px)
	{
.sfm-navicon-button.sf_label_default
	{
	display:none;	
	}
}
@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}	
}

.comment-form-url
{
display:none !important;	
}

If so, how would I adapt this code?

Thanks

[Alaa]

No, it shouldn’t, I’ve tested the code on your website and I can tell it’s working fine.

Thanks.