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

Changing slideshow banner height on homepage in Bedford

Question

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!

Share this post


Link to post

16 answers to this question

Recommended Posts

  • 0

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;
}

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0
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. 

Share this post


Link to post
  • 0
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!

Share this post


Link to post
  • 0
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 */
}

 

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

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>

Share this post


Link to post
  • 0

@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;
}

 

Share this post


Link to post
  • 0
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)

Share this post


Link to post
  • 0

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;
}

 

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...