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

Changing slideshow banner height on homepage in Bedford


Emmyk1

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!

Link to post
  • Answers 27
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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 settin

Posted Images

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

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. 

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!

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 */
}

 

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

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>

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

 

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)

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

 

 

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

 

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.

 

 

 

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;

}

 

 

 

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 🙂 

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? 

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)

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