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

Bedford: Changing the banner height?



I’ve been trying to change the banner/header height in the Bedford template by inserting this in the CSS editor but it’s not yielding any results.

#collection-xxxxx #banner-thumbnail-wrapper { height: 50px; }

Does anyone have any suggestions on what else can be done? I would also like to be able to edit the height of the banner when it’s a slideshow.


Link to comment
  • Answers 98
  • Created
  • Last Reply

Recommended Posts

I wanted to shrink the size of the banner; adding this to custom CSS worked fine:

.transparent-header.view-list .banner-thumbnail-wrapper, 
.transparent-header.collection-type-page .banner-thumbnail-wrapper {
   padding: 100px 0px;

The 100px is the padding above and below your site description. The 0px is the padding to the left and the right.

Link to comment

This snippet works like a charm, however I bit of a newbie to scipt like this. My home page now looks great with the screen being full height, however I want the banner images on all my other pages to be 25% of the page height. How do I adjust this.?

Link to comment

Oh how I wish that worked for me, Paul. Incorporated your code but the results are the same in FireFox. BTW, the issue shows up only on those monitors that have more of a 2 to 1 aspect radio (more cinema style). Did you check your site on that kind of monitor?

Link to comment

This works quite well. The only issue I notice is that the images / galleries are window height, but below the header. Meaning a section of the photo goes below the bottom of the screen, equal to the height of the header. This also makes the image body text lower than it should be, since the image body text is centered to the image. Does anyone know a way to subtract the height of the header so the images are truly window height and the body image text is properly centered?

I'm also having issues with Firefox, btw.

Link to comment

Here you go:


It isn't live yet so you'll need to the password:


The browser just doesn't recognize the code and has no effect on the slideshow height. Of note, the template wasn't working properly on Firefox prior to my adding this code. Rather than scaling correctly the images took up only about half of the screen and got severely cropped. I added the code in an attempt to fix the problem but all it did was create a black strip below the slideshow. Thus far I've only noticed the issue on monitors with 2 to 1 aspect ratios.

Link to comment

@foleyatwork I can't get this script to work for the gallery/slideshow banner images on my homepage (or any page for that matter). It works just fine when I upload an image as the page thumbnail, but nothing doing when I use the gallery feature. What could I be doing wrong?

Link to comment

I tried the code above, on my site that is using a gallery on the home page, and it works great. Except on Firefox. On Firefox, the container is scaled (as you can see the black background) but the contained pictures are not. Works in Chrome and IE, and on the iPad. Any ideas?

Link to comment

@foleyatwork - Unfortunately I'm working in preview mode, though I think I figured out the issue. I was removing "/body.homepage/" entirely and not just the actual comments. I read your notes as if I should remove the comment and it's contents entirely. Oops! Thanks for the quick follow up!

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.

  • Create New...