[Resolved] Custom Right Sidebar width differently than the global setting.

[David]

Try this CSS:

.right-sidebar.full-width-content #right-sidebar {
    max-width: 160px;
}
.right-sidebar.full-width-content .site-content .content-area {
    max-width: calc( 100% - 160px);
    width: unset;
}

[Huseyin]

Nope the css code doesnt help

Before
https://ibb.co/1qL4q3N
After:
https://ibb.co/7jcqNX3

[Elvin]

Hi,

To clarify: are you trying to achieve something like this?
https://share.getcloudapp.com/2Nu0BX2D

If so, we can modify David’s code a bit to achieve the same result.

Try this:

.right-sidebar.full-width-content #right-sidebar {
    max-width: 160px;
}
.right-sidebar.full-width-content .site-content .content-area {
    max-width: calc( 100% - 160px);
    width: 100%;
}

[Huseyin]

Perfect!! Thanks, Elvin

[Elvin]

Glad it works for you. No problem. 🙂

[Huseyin]

Sorry i forgot how do I hide the Sidebar on tablet and phone devices ( (max-width: 979px) ) ? Where i want the content 100% width on tablet and phone devices.

I grab codes from the thread (i attached it below) and play with it, but no luck.

https://generatepress.com/forums/topic/hide-sidebar-on-tablet-mobile/

[Elvin]

You can use @media rule for that.

Example:

@media (max-width: 979px){
.right-sidebar.full-width-content #right-sidebar {
    display:none;
}
}

[Huseyin]

thanks

[Elvin]

No problem. 🙂

[Author]

Posts