Canvas Support

Change the width of the sidebar

8 replies·opened Feb 12, 2019
C
chocoprodFeb 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

S
SemiColonWebSTAFFFeb 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.

C
chocoprodFeb 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.

S
SemiColonWebSTAFFFeb 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.

C
chocoprodFeb 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.

S
SemiColonWebSTAFFFeb 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.

C
chocoprodFeb 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.

S
SemiColonWebSTAFFFeb 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.

C
chocoprodFeb 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
Change the width of the sidebar · Canvas Template Support