Canvas Support

Change the width of the sidebar

8 replies · opened Feb 12, 2019

CchocoprodFeb 12, 2019

Hello,

On the latest version of Canvas, I'd like to change the width of the sidebar (to 300px).

When I try this (style.css):

.postcontent { width: 800px; }
.sidebar { width: 300px; }

The mobile view is not ok.

Thanks

SSemicolon WebSTAFFFeb 12, 2019

Hello,

Consider using the following code: 

@media (min-width: 992px) {
	.postcontent { width: 800px; }
	.sidebar { width: 300px; }
}

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CchocoprodFeb 13, 2019

Hello,

Thank you for your reply.

I added this code to custom.css.

The mobile view is ok but on desktop, the 300px sidebar is at the bottom of the content.

Thank you for any help you can offer.

SSemicolon WebSTAFFFeb 15, 2019

Hello,

You can consider adding the following code too inside the Media Query together with the Previous codes: 

.postcontent,
.sidebar { margin-right: 40px; }

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CchocoprodFeb 15, 2019

Hello,

Thank you for your reply.

Now it works fine on desktop and smartphone but on iPad (landscape mode), the 300px sidebar is at the bottom of the content.

Thank you for any help you can offer.

SSemicolon WebSTAFFFeb 15, 2019

Hello,

Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

CchocoprodFeb 15, 2019

Hello,

Thank you for your reply.

Here is the URL: https://www.suisse-romande.com/new/
User: semicolonweb
Password: canvas

The problem is, on iPad landscape mode (on Chrome and Firefox), the 300px sidebar is at the bottom of the content.

I used a fresh version of Canvas 5.6 for the test.

I added this code to custom.css:

@media (min-width: 992px) {
.postcontent { width: 800px; }
.sidebar { width: 300px; }
.postcontent,
.sidebar { margin-right: 40px; }
}

Thank you for any help you can offer.

SSemicolon WebSTAFFFeb 16, 2019

Hello,

According to your Issue, we understand that the Codes above is not appropriate for Screens below 1200px, so please change your Codes to the following: 

@media (min-width: 1200px) {
	.postcontent { width: 800px; }
	.sidebar { width: 300px; }

	.postcontent,
	.sidebar { margin-right: 40px; }
}

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CchocoprodFeb 16, 2019

It works perfectly!
Thanks for your great theme and great support.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard