How do you set a max width for the site content when using the York template?

I'm using the York template for my portfolio and it's great except for the fact that I can't set a max width for the content on the site meaning that on large screens (such as my 27 inch display) the images become drastically oversized.

In the 'style editor' under the 'site' section there is a 'site max width' control though it does not seem to have any effect on the max width of the content in the page.

Would really appreciate some help with this.

Thanks,Matt.

Hi Matt. It's always a good idea to check the style editor to see if you can adjust the setting from there. It sounds like you've done that. In which case, you can try inserting this CSS into the CSS editor.

#page {
 max-width: 980px; /*Adjust this number as desired.*/
}

-Brandon

Hi Brandon,

Thanks very much - this worked great!

Is there a way I can also add some CSS to cap the width of the top nav?

Thanks,Matt.

Hi Brandon,

Thanks very much - this worked great!

Is there a way I can also add some CSS to cap the width of the top nav?

Thanks,Matt.

New answer for you:

The following code will limit the width of the entire website on the York template. It also prevents the height of other elements within the website from growing.

/*Prevent York Template from expanding infinitely in height/width*/

/*Limit width of entire site.*/
#site {
   max-width: 1400px; /*Adjust as desired.*/
   margin-right: auto;
   margin-left: auto;
}

/*Prevent header growing in height infinitely.*/
#header {
   margin-top: 5%;
}

-Brandon

Sorry to follow this with a further question but there is one last issue I've noticed as a result of capping the width of the site.

Where the site is now narrower the thumbnails in the gallery/index are narrower too while their height remains as it was when the site width was not capped. This means that (on larger screens) the images appear square when they should be rectangles (landscape) which is causing some undesirable cropping.

Let me know if you'd prefer I ask this in a new thread.

Thanks,Matt.

Sorry to follow this with a further question but there is one last issue I've noticed as a result of capping the width of the site.

Where the site is now narrower the thumbnails in the gallery/index are narrower too while their height remains as it was when the site width was not capped. This means that (on larger screens) the images appear square when they should be rectangles (landscape) which is causing some undesirable cropping.

Let me know if you'd prefer I ask this in a new thread.

Thanks,Matt.

Ahh. Unintended consequences!

Can you post a link to the site?

Sure, here it is:

https://matthew-mitchellcamp.squarespace.com/

Sure, here it is:

https://matthew-mitchellcamp.squarespace.com/

Though I haven't upgraded it yet so you may not be able to see it?

I could upload some screen shots?

I edited the code in my second answer. It's much simpler now (assuming that you removed the previous code).

Regarding your comment about the aspect ratio of the images: capping the max-width does not affect the rendering of the images, or their aspect ratio. If you remove the code and expand and contract the width of your browser from very wide to very thin, you'll see that those images change aspect ratio throughout the entire range. That is how that particular template is designed. Capping the max-width simply stops that scaling at a certain point, once that max-width is reached.

Hi Brandon,

Thanks for this - I've plugged in the code and the site is starting to look good now I think.

I have an unrelated question I thought I'd drop a link to here on the off chance you can help with this also:

https://answers.squarespace.com/questions/133509/is-there-a-way-i-can-remove-vertical-padding-betwe.html

Many thanks,Matt.

Hi Brandon,

Thanks for this - I've plugged in the code and the site is starting to look good now I think.

I have an unrelated question I thought I'd drop a link to here on the off chance you can help with this also:

https://answers.squarespace.com/questions/133509/is-there-a-way-i-can-remove-vertical-padding-betwe.html

Many thanks,Matt.

Cool.

I'll try to take a look at the other question soon. Do keep in mind, people here may be more likely to help if they see that you take the time mark answers as 'accepted' if in fact they are the right answer for you.

Ah absolutely. Sorry, I'm new to Squarespace and haven't yet taken the time to properly workout how the answers forum works.

I'll take a look now.

Thanks,Matt.