Bedford: How can I adjust banner image size?

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.

Add this custom CSS to your site under Design:

.view-list .banner-thumbnail-wrapper, .collection-type-page .banner-thumbnail-wrapper, .collection-type-index .banner-thumbnail-wrapper {max-height: 300/insert the value you want here/px;} 

@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??

@web_chan:

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:

collection-54c3d841e4b0f7f4ab5d68c1

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

@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/

Hi,

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!

B.

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

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

I just removed the banner images from every page except my homepage because the sizing wasn't working out but I'd like to add them back in if I can get them to be where I want (homepage 500px high, contact/shop pages 200px high).

Hi @web_chan - This has worked nicely for my desktop version of the site, but this has also impacted the mobile version - is there a way to scale the image automatically for the mobile version?

This is the image on my homepage if that makes any difference...