Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Emma5161

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

Question

Hi!

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.

Edited by Emma5161

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 1

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;
}

Share this post


Link to post
  • 0

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:


<style>
#innerWrapper{width:100%}
</style>

Hope it helps!

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...