Canvas Support

Reducing spacing for mobile responsive rendering

3 replies · opened Dec 12, 2017

LlouisleongDec 12, 2017

Hi,

When I view the page on mobile, i would like to reduce the left and right padding. Looking at the attachment, there's quite a bit of whitespace on both sides of the text. How can I reduce that down?

SSemicolon WebSTAFFDec 13, 2017

Hello,

This is Definitely Possible! Simply consider using the following CSS Code: 

@media (max-width: 767px) {
	.container,
	#header.full-header .container {
		width: auto !important;
		margin: 0 30px !important;
	}
}

This will definitely work fine. Hope this Helps!

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

LlouisleongDec 14, 2017

Do I modify an existing css file or add a new one?

I created a new css file, added this code snippet in, and referenced it in my html file.

I changed the margin to 0 15px, but I still see the same wide margin on the left and right

SSemicolon WebSTAFFDec 15, 2017

Hello,

It is Highly Recommended that you do not Edit the Default style.css File or any of the Default CSS Files to make your changes and instead use the css/custom.css File we have included in the Package/HTML Folder to modify and overwrite the Default Styles. This is particularly very useful when you need to Update Canvas to the Latest Version. Complete Usage Instructions regarding this can be found in the Documentation > Start > Customization Section. So, now you can add your Custom CSS codes in the css/custom.css File and it should work fine.

Hope this Helps!

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

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