Jump to content

Changing slideshow banner height on homepage in Bedford

Recommended Posts

Does anyone know how I can change the banner height on my homepage slideshow banner on the Bedford template? I know this question has been asked a few times. There seems to be codes flying around that will change general banner height, but not the slideshow banner height on the homepage (top banner) specifically. 

Any help would be amazing, thanks!

Link to comment

Copy and paste the code below to your Custom CSS. Change the height value to what you want. Let me know if this works... 

.collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-block, 
.collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-block, 
{
	max-height: 500px!important;
}

.sqs-gallery-design-stacked-slide {
	height: 500px!important;
}
Link to comment

Hey, that's definitely helped thank you!! If you take a look at the homepage now the only thing that is odd is that there is a block of light grey text underneath the banner image and the page intro text falls into that grey box. Do you know how I can get rid of that? I've looked in site style but it doesn't seem to be an obvious thing I can change.

Thank you so much!

Link to comment
  • 3 weeks later...
13 hours ago, DaleBoettcherPhoto said:

Lu.diehl, thank you! Is there a way to make this so that it does not affect the mobile version?

Hi @DaleBoettcherPhoto, the code I wrote before isn't great actually... I would try it differently this time. If you're looking to change it only in one page then add the code below to the page setting > Advanced instead of adding it the general Custom CSS.  If you're looking to change it all pages, add it to Design > Custom CSS and remove the <style> tags.

<style>
@media only screen and (min-device-width: 640px){
  .promoted-gallery-wrapper {
    height: 500px!important;
  }
  .sqs-gallery-design-stacked-slide {
    height: 500px!important;
}
  .sqs-gallery-controls .next, .sqs-gallery-controls .previous{
    top: 250px!important;
  }
}
</style>

Let me know how it looks... if you need further help, please share a link to your website. 

Link to comment
  • 2 weeks later...
On 12/6/2019 at 12:07 PM, lu.diehl said:

Hi @DaleBoettcherPhoto, the code I wrote before isn't great actually... I would try it differently this time. If you're looking to change it only in one page then add the code below to the page setting > Advanced instead of adding it the general Custom CSS.  If you're looking to change it all pages, add it to Design > Custom CSS and remove the <style> tags.


<style>
@media only screen and (min-device-width: 640px){
  .promoted-gallery-wrapper {
    height: 500px!important;
  }
  .sqs-gallery-design-stacked-slide {
    height: 500px!important;
}
  .sqs-gallery-controls .next, .sqs-gallery-controls .previous{
    top: 250px!important;
  }
}
</style>

Let me know how it looks... if you need further help, please share a link to your website. 

@lu.diehl thanks for this! any guidance on setting the mobile width would be greatly appreciated. the 640px limitations constrains iphone 11 well, but not ipad ... is the trick to simply increase the min-device-width? recommendations? Thanks!

Link to comment
18 hours ago, squick said:

thanks for this! any guidance on setting the mobile width would be greatly appreciated. the 640px limitations constrains iphone 11 well, but not ipad ... is the trick to simply increase the min-device-width? recommendations? Thanks!

Yes, you can actually change the min-device-width to whatever you want, but for general iPad layouts use 768px. 

//* For general iPad layouts *//

@media only screen and (device-width: 768px) {
  /* Code goes here */
}

 

Link to comment
  • 3 weeks later...
On 11/19/2019 at 8:27 AM, Emmyk1 said:

Hey, that's definitely helped thank you!! If you take a look at the homepage now the only thing that is odd is that there is a block of light grey text underneath the banner image and the page intro text falls into that grey box. Do you know how I can get rid of that? I've looked in site style but it doesn't seem to be an obvious thing I can change.

Thank you so much!

Thanks @lu.diehl! It worked but I am facing the same problem that @Emmyk1. There's a block of light grey about 250px underneath de banner image and I can't figure out how to remove it. Have you faced the same thing or do you have a fix? Current height is set at 450px on desktop.

 

@media only screen and (min-device-width: 640px){
  .promoted-gallery-wrapper {
    height: 450px!important;
  }
  .sqs-gallery-design-stacked-slide {
    height: 450px!important;
}
  .sqs-gallery-controls .next, .sqs-gallery-controls .previous{
    top: 250px!important;
  }
}
@media only screen and (min-width : 320px) and (max-width : 480px){
  .promoted-gallery-wrapper {
    height: 200px!important;
  }
  .sqs-gallery-design-stacked-slide {
    height: 200px!important;
}
  .sqs-gallery-controls .next, .sqs-gallery-controls .previous{
    top: 250px!important;
  }
}

Thanks in advance!

 

image.thumb.png.2f8d20abe3bbaedf3f390c1b22e96dcc.png

Link to comment

Hi-- I was trying to get this to work on Avenue, which is almost did, only issue is the grey box under the shortened height image in the gallery.   Was this resolved?

I used the follow css pasted above:

<style>
@media only screen and (min-device-width: 640px){
  .promoted-gallery-wrapper {
    height: 500px!important;
  }
  .sqs-gallery-design-stacked-slide {
    height: 500px!important;
}
  .sqs-gallery-controls .next, .sqs-gallery-controls .previous{
    top: 250px!important;
  }
}
</style>

Link to comment

@Monte63 - sorry for the late response. 

Let me know if this works:

.collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow {
	height: 450px !important;
	background-color: #FFFFFF;
}

@media only screen and (max-device-height: 640px)
.collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow {
	height: 200px !important;
	background-color: #FFFFFF;
}

 

Link to comment
7 hours ago, tantrum said:

Hi-- I was trying to get this to work on Avenue, which is almost did, only issue is the grey box under the shortened height image in the gallery.   Was this resolved?

Hey @tantrum - try adding the code in the response above, if it doesn't work since it is a different template please share a link to your website (and psw if needed)

Link to comment

Thanks @lu.diehl! Very grateful, it worked like a charm!

 

17 hours ago, lu.diehl said:

@Monte63 - sorry for the late response. 

Let me know if this works:


.collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow {
	height: 450px !important;
	background-color: #FFFFFF;
}

@media only screen and (max-device-height: 640px)
.collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow {
	height: 200px !important;
	background-color: #FFFFFF;
}

 

 

Link to comment
  • 2 weeks later...

Hi @lu.diehl,  also a lot of thanks for your help on this from me.

I'm trying to find a way to reduce the height of my banner and i'm almost there. I've got the Anya template from the Bedford family on a site i'm working on and thanks to your code i got it to the right height for me.

I just can't seem to get rid of that light grey bar beneath the banner...

This is the code i used in the Advanced tab of the homepage:

<style>
@media only screen and (min-device-width: 640px){
  .promoted-gallery-wrapper {
    height: 500px!important;
  }
  .sqs-gallery-design-stacked-slide {
    height: 500px!important;
}
  .sqs-gallery-controls .next, .sqs-gallery-controls .previous{
    top: 250px!important;
  }
}
</style>

I can't seem to get that last piece of code you added to work properly without errors.

This thread helped me to get the best results so far, i just can't seem to find anything related to reducing the height of the banner except threads from 2014 and 2016. And they don't work at all anymore...

Please help. ;-)

ps: the site i'm working on is https://www.udenplus.nl/ (right the banner height's set back to normal because obvious reasons...)

 

Link to comment
  • 3 weeks later...
  • 1 month later...

@mabros - are you planning to switch to bedford or you'll stay with brine? The CSS change depending on the template and I can only help with the current template installed. Also, I don't see a slideshow on your site. Can you share the page where the slideshow or banner you want help with is located? 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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