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

Bedford: Changing the banner height?

Question

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.

Thanks!

Edited by ccbjan
Fix title

Share this post


Link to post

Recommended Posts

  • 0

@foleyatwork - Site is now live (ny-ave.com), I've reported the issue with SquareSpace support as the issue isn't fixed even after removing the code. I think we've narrowed it down to 15" devices at a specific resolution on a specific version of Windows. Weird, huh?

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0
Guest

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.

Edited by Guest

Share this post


Link to post
  • 0

@foleyatwork The code worked for me and at first it was fine on mobile too, but now my images aren't fitting on the screen of my phone, they are much wider with mobile styles on or off. Is there something that should be added to fix that? You can see it at www.weatherbrand.com

Thanks!

Share this post


Link to post
  • 0

Hello

When I adjust the banner height percentage from @foleyatwork's script (shown in the snippet below), it does nothing. Even if I set it to 20%, it doesn't change anything.

Any help would be greatly appreciated. Thanks!

/body.homepage/ .sqs-featured-posts-gallery .gallery-wrapper .posts .post { height: 100% !important;

Share this post


Link to post
  • 0
Guest

anyone else having problems with this script in Firefox?

Share this post


Link to post
  • 0
Guest

Here you go:

https://savethebosque.squarespace.com

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

b0squebash

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.

Share this post


Link to post
  • 0

Here's the site I mentioned earlier where it's working on everything i've tried except Firefox. I used the script above but changed it to 50% of the window height, not 100%. On Firefox, the images themselves aren't scaling, though some aspects of the container are. (Note that the content is now tucked up underneath the image.) Contrast that to Chrome, where it works as I expected. Ideas?

http://quickspacenevada.squarespace.com

(Still Trial, so Visitor Access...)

Thank you!

Share this post


Link to post
  • 0

Anyone else note that this code affects the way the shopping cart works? When clicking "add to cart", the thing that pops up and floats with you as you scroll doesn't float anymore and stays at the top of the page. We've noticed that several of our visitors have been confused by this. Any thoughts on a fix? Thanks. (cc/ @foleyatwork)

Share this post


Link to post
  • 0

All works great apart from Firefox. Tested on multiple versions and anything on a fairly big monitor the homepage image is not scaling to fill the screen.

http://simon-randall-mw7u.squarespace.com


Award Winning Designer ( not a budding one ). Get in touch if you want to invest in something great. Our developer worked with the platform since inception and I have worked for the best advertising agencies in the world. Get in touch and do not use the marketplace. Visit here to see more

Share this post


Link to post
  • 0

Not got a real answer for you Simon but I can confirm the code works for my site in Firefox (tested on multiple machines). The only thing I did different was create a fullscreen.js file using the dev platform instead of using the footer code injection area on the consumer platform. Have a look at www.valorizzazioniculturali.com and see if it works for you.

Share this post


Link to post
  • 0

All works great apart from Firefox. Tested on multiple versions and anything on a fairly big monitor the homepage image is not scaling to fill the screen.

@si lunt – I just noticed this on a new page I created with a slideshow instead of a singe image. It displays the same defect that you have, the window in Firefox is limited to @galleryHeight + 100px (which in Bedford is 600px + 100px for a total of 700px.)

In developer mode I changed:


&.transparent-header {
 #promotedGalleryWrapper {
   .sqs-gallery-block-slideshow {
     height:@galleryHeight + 100px !important;
     .sqs-gallery {
       height:@galleryHeight + 100px !important;
     }
   }
 }
}

To:


&.transparent-header {
 #promotedGalleryWrapper {
   .sqs-gallery-block-slideshow {
     height:100% !important;
     .sqs-gallery {
       height:100% !important;
     }
   }
 }
}

And it now works fine in Firefox as well – this works only with a transparent header.

Edited by Paul
clarification of code working only with transparent header

Share this post


Link to post
  • 0

Thanks Paul

Don't want to really flip the dev switch on that site tho. I'll have a play about.


Award Winning Designer ( not a budding one ). Get in touch if you want to invest in something great. Our developer worked with the platform since inception and I have worked for the best advertising agencies in the world. Get in touch and do not use the marketplace. Visit here to see more

Share this post


Link to post
  • 0
Guest

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?

Share this post


Link to post
  • 0

Im having the same problem with firefox aswell. Is there a way of fixing this within either the CSS or using code injection instead of using the developer platform?

Share this post


Link to post
  • 0

I figured it out myself, added this to the CSS

.sqs-gallery.sqs-gallery-design-stacked { min-height: 100% !important;}

This works with both a visible header or transparent header.

Edited by mrg1234

Share this post


Link to post
  • 0

This code didn't work at all for my slideshow. Am I missing something?


#collection-5342eca3e4b0258f115c2563 .desc-wrapper {
 height:150px!important;
}

Edited by Jvalal

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...