Sidebar Width (Need Quick Help)

[Ranjit Kumar]

Hi Tom, just got approved by mediavine.. but they want my website something like this…

Here’s the email they sent me –

With your current setup, as your page shrinks in width your sidebar also shrinks in width.
We need your sidebar adjusted so that it remains a minimum of 300px wide whenever it is beside the content. In addition, the sidebar must remain beside the content on all screens greater than 1023px in width. This ensures that all users on all devices see the ads properly.

I have gone through this link https://generatepress.com/forums/topic/mediavine-asks-for-sidebar-to-be-300px-min-and-to-move-to-bottom-at-1024-width/ but i see no changes.

Please let me know how to solve this..

[David]

Hi there,

you just need to increase the % your sidebar occupies in Customizer > Layout Sidebars or increase the Content Container width.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ranjit Kumar]

Currently it is at 30% … How to check the px size after increasing the sidebar width…

Have a look at this website..

https://www.noracooks.com/

This website is running mediavine ads and meets all the criteria..

[David]

Try adding this CSS:

@media (min-width: 769px) {
    #primary {
        width: calc(100% - 330px);
    }
    #right-sidebar {
        width: 330px;
    }
}

It will keep the sidebar a fixed width of 330px – minus the 15px left and right padding and you have 300px for the ads.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ranjit Kumar]

I have added the above code…
And this is my setting for the sidebar widgets, see the screenshot
i.is.cc/2E05hTIe.png

Please let me know what else to do?
Thanks

[David]

I made an adjustment to the CSS above, try that.
This will override the Customizer settings.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ranjit Kumar]

I have already applied that code david (you can check)
Means I don’t have to do anything else in the customizer setting right?

But have a look at the alingnment..the sidebar is attached to the left
i.is.cc/2E38fMZ1.png

Let me know what to do now…

Please check the sample website that I sent you above..(that website don’t have this kind of left alignment, everything is responsive and in center)

[David]

No need to change anything else in the customizer.

Add this CSS to put the left padding back on the Sidebar widgets:

@media (max-width: 768px) {
    #right-sidebar.widget-area .widget {
        padding-left: 15px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ranjit Kumar]

I have added the above code.. now kindly check and let me know

And about this line I mentioned on the ticket

In addition, the sidebar must remain beside the content on all screens greater than 1023px in width. This ensures that all users on all devices see the ads properly.

[David]

It does – it actually remains beside the content on screens over 769px.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ranjit Kumar]

Means everything is sorted right?

If yes, i will ask the mediavine team to look further.. and let you know

[David]

Correct 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts