Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
MattMC6

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

Question

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.

Edited by MattMC6
Initial Revision

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 2

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.

Edited by brandon

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

Share this post


Link to post
  • 0

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.

Edited by brandon

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

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

Ahh. Unintended consequences!

Can you post a link to the site?


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

Share this post


Link to post
  • 0

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)

Share this post


Link to post
  • 0

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)

Share this post


Link to post
  • 0

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.

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...