Jump to content

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

Recommended Posts

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.

Link to comment
  • Replies 15
  • Created
  • Last Reply

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


If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

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


If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

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.

Link to comment

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.

Link to comment

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

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.

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment

Archived

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.