Hiding Sidebar on mobile in CSS doesnt work on front end

[tashitendrel]

Dear Support Team,

I have recently changed the posts sidebar in a way that I have created Dynamic Content element (div) and pasted it’s shortcode to the sidebar widget panel. It shows fine however the Global CSS code that is supposed to hide that sidebar on smaller screens stopped working on the front end. It still works in Cornerstone preview, but on front end it doesnt. Also I cannot see that CSS code in Chrome element inspector.

I have checked all the elements involved. The CSS I use is:

@media(max-width:1200px){
body .x-sidebar,
body .x-sidebar.left,
body .x-sidebar.right {
display: none !important;
}
.x-main {
float: none;
width: 100%;
}
}

The sidebar should be on Posts biggest screens only: https://dharmaebooks.org/calling-lama-indonesia/
but only Cornerstone preview shows it correctly. I have deleted all the cache.
Please help.
Beata

[prakash_s]

Hello Beata,

Thanks for writing to us.

I would suggest you please add this custom CSS code to the global CSS.

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

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[tashitendrel]

Adding it works. Thank you!

[prakash_s]

You are most welcome @tashitendrel