Jump to content

Bedford: How can I adjust banner image size?

Recommended Posts

I'm using Bedford template. I find I cannot adjust the amount of space that my banner image takes up on the screen. Naturally I want it to stretch width-wise, but vertically it takes up the entire screen on my Mac, and only ¼ on PC browsers. Is there a way to standardize this? Also, just in general a way to drag to banner area up and down to dictate the spread of the image?

Thanks in advance.

Link to comment
  • 1 month later...
  • Replies 9
  • Views 44.3k
  • Created
  • Last Reply
  • 3 weeks later...

@Farmette Helen.

Thanks for the help!

I discovered that I needed to change max-height to min-height in order to achieve the right dimensions for my banner. It works, but I have a follow up question!

Is there something I can do if I want the banner on one page to have a min-height: 100px and a banner on a different page to have a min-height: 200px

This is the code I have entered in my custom CSS under Design:

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {min-height: 100px;}

Any tips??

Link to comment


You need to find the collection id for the specific pages and enter the same code. I have this on one of my sites to change CSS styling for just one page. Just look at your site using Google Chrome's "Inspect Element" feature, which reveals HTML and CSS on any site, and find the page id. It will look something like this:


. Then just add that id before your CSS for the banner image and you can make the banner whatever size you need on each page. For example:

#collection-54c3d841e4b0f7f4ab5d68c1 .view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {min-height: 100px;} 

Add a second line of code just like this with the page id for your second page and change the height to what you need it to be. Keep in mind that these changes will not apply to the mobile site unless you use more code, which I'm happy to help you with if you need it.

Link to comment
  • 4 weeks later...

@Farmette Helen. That worked! Any chance you can recommend a similar code that would do the same effect when you are using a slideshow as the banner in bedford? See an example on my page:

It works here, when the banner is the thumbnail:chelsea-davis-1p5b.squarespace.com/new-page-89

It doesn't work, when the banner is a slideshow:chelsea-davis-1p5b.squarespace.com/homepage/

Link to comment
  • 1 month later...


Thanks for this! Is there any way how to change banner height of individual blog posts in the Bedford template? I don't need each different, it can be the same height for all posts. I cannot find where to insert the code injection though. My banner image for the blog post is too narrow and the page title and blog post title text clashes in the banner. Thank you very much for any help!


Link to comment
  • 8 months later...

Hi Helen,

Thanks for the above info.

I am trying to control the height of my banner images (Bedford template) on mobile devices. Could you please help me with the custom CSS code? I am currently using the following code to control the banners' height on desktops:

.transparent-header.view-list .banner-thumbnail-wrapper, .transparent-header.collection-type-page .banner-thumbnail-wrapper, .blog-item-wrapper { padding: 320px 0 155px; }

Thank you very much. A

Link to comment
  • 3 weeks later...

Having problems getting this done on Bedford template. I can change my homepage banner image size but I can't seem to get more than one page to have different heights even when using the unique collection ID for each page. I change my home page and then for some reason it changes my contact page also, even with code for the contact page collection ID. Any help? www.thisismoti.com

Link to comment
  • 9 months later...


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.