Jump to content

How can I change page padding and content width for one page only?

Recommended Posts


I would like to Change side-padding and content width for one page on my site.

I´ve been searching the web for days after the right CSS codes to use, butnothing seems to work.

I use the Native template.http://www.fredlos.no/parallax/

Question 1. Padding:Native has no features to change the side padding (only top and bottom) and I want to remove side-padding from one certain page.

This Code takes away side-padding for all pages:

#site { margin: 0 auto; padding: 0px 0px; }

To remove padding for one certain page, I inserted the page-id instead of #site, like this:

#collection-550c1227e4b01f5b2b709f0e { margin: 0 auto; padding: 0px 0px; }

I have tried several different codes, and all of them work perfectly when pointing to the site as a whole, but when I point to one specific page-id, I can no longer change the side-padding. The top and bottom padding is still adjustable, but that is not what I need..

What can I do different?

Question 2. Changing content width

  • Nothing works at all - because the settings for content width in style editor seems to override whatever code I am inserting.

I could off course set the style editor to maximum content width, and then use space blocks tonarrow in the content of all the other pages. This is my current solution. But doing this every time I will post a new image on every page, seems like a lot of extra work in the long run. After all, it is only on one of my pages that I need to have a wider content area, so the smart thing seems to be to find a code to make this page wider - but when increasing the content width, the only thing that happens is that the white area around the content becomes wider - so that I can actually scroll my page vertically. The content/text picture itself remain at 800px (the value set in style editor) - no matter what code I insert.

CSS and coding is totally new to me, but I have been reading all I could find about thistopic in the squarespace-forum and I don´t know what more to try.

So. If anyone have any proposals, I would really appreciate it.:)

Best regards,

Emma-Lisa Namløs.

Link to comment
  • Replies 3
  • Views 47.9k
  • Created
  • Last Reply

1) the padding you want to affect is for the #site element which is inside the #collection-550c1227e4b01f5b2b709f0e element, not the #collection-550c1227e4b01f5b2b709f0e element itself. Change your code to:

#collection-550c1227e4b01f5b2b709f0e #site {
   margin: 0 auto;
   padding: 0px 0px;

to target the #site element withing the #collection-550c1227e4b01f5b2b709f0e element

2) Same thing for content width. Target it directly and add an !important if you want to make sure it isn't overridden, but you shouldn't need to because your custom css is loaded after the style editor tweaks:

#collection-550c1227e4b01f5b2b709f0e #page{
   max-width:800px !important;

Link to comment
  • 1 year later...

You can try with this code.

Add it to the Page HEader Code Injection section of the page where you want to adjust the width:


Hope it helps!

Link to comment
  • 3 years later...

I'm having the same issue and have spent hours looking at posts for answers. Tried clayyount's solution but I'm afraid the margin and padding commands just aren't doing the trick

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.