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

25 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
  • 0

Hi @lu.diehl, thanks for you help.

I've been trying to extend my bedford slideshow banners height for a while now and your code works well.

I've ran into the same problem as @Monte63 with a gray block underneath the slideshow on android, tried your solution but it gives me "syntax error on line 6" msg. 

Any ideas? https://www.adamruszkowski.info/

 

thanks in advance

 

 

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 0

The code above, to adjust the banner slideshow height was helpful and successful! Thank you @lu.diehl. However, I'm having the same problem as @Poerd and @Emmyk1with the remaining grey strip. I've tried using the code in this thread, but it doesn't work. Anyone able to help? I'm using the "Bedford" template.

 

 

 

Share this post


Link to post
  • 0

Scratch my earlier question. I added this code to the CSS that @lu.diehl posted regarding banner slideshow height and the grey strip disappeared. Hope it works for those still having trouble!

 .sqs-gallery-block-slideshow{
    background-color: #ffffff;
    height: 450px!important;

}

 

 

 

Share this post


Link to post
  • 0

Hello everyone,

So to follow up with this subject, what is the right personalized CSS which I can use to reduce the height if a slide show banner on bedford ? 

(It would be just on one page)

I have a 7.0 version. 

Thanks 🙂 

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

Hello Lu,
Thanks for helping, in fact I did not start the slide show or switch to bedford template because I was not sure I would manage to  modify the slide show height, so I did not prepare it. I thought I would use the code you are displaying on this discussion, has it to be personnalised? (I just don't get the process)

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