Docs

[Trankuility]

Hello,

I’m trying to decrease the time it takes to load pages when viewed on mobile. So I’d like to prevent the sidebar from rendering on mobile. I do not want to just make it invisible, I want to block it completely. How do I do that?

[Rahul]

Hey There,

Let’s try adding this custom CSS :

@media ( max-width: 979px) {

	.x-container .x-sidebar.left {
	display: none;
	}

	.x-main {
	float: none;
	width: 100%;
	}

}

Hope it helps, Cheers!

[Trankuility]

Does that prevent it from rendering on Tablets too? I only want to prevent the render on mobile.

[Darshana]

Hi there,

Try changing the device width of 979px from the above code to 480px.

Hope that helps.

[Trankuility]

Hello,

I finally got around to trying this. I tried both codes and cleared cache, but the sidebar still showed when viewed on mobile. Once you scroll down past the article content, it then shows the sidebar content.

Also, I don’t want the Homepage to be affected. I DO want the Homepage to continue showing the sidebar content on mobile. I want to prevent the sidebar content from showing on posts only.

I removed the code for now. What should I do next?

[Trankuility]

This reply has been marked as private.

[Lely]

Hello There,

Upon checking, the sidebar is on the right but then previous CSS is pertaining to sidebar on the left. Please try the following CSS:

@media ( max-width: 480px) {

	body:not(.home) .x-container .x-sidebar.right {
	display: none;
	}

	body:not(.home) .x-main {
	float: none;
	width: 100%;
	}

}

Hope this helps.

[Trankuility]

That worked perfectly, thank you.

[Lely]

You’re welcome!

Cheers!

[Author]

Posts