Changing the height of a banner slideshow

Site URL: https://www.teamhammercock.com

I am trying to change the height of the banner slideshow on the homepage of the website I am working on. I have tried custom code for that data section but when I do that the text and arrows get cut off and are no longer centered, please help.

Try adding to Design > Custom CSS

/* Home Mobile Slideshow */
@media screen and (max-width:767px) {
[data-section-id="6260642eee78e95fdf168c63"]
.user-items-list-item-container.user-items-list-banner-slideshow ul {
    height: 45vh !important;
    min-height: unset !important;
}
.slide-content.list-item-card-background {
    max-width: 100% !important;
    margin: 0 !important;
}
}}

On 4/23/2022 at 10:58 PM, tuanphan said:

Try adding to Design > Custom CSS

/* Home Mobile Slideshow */
@media screen and (max-width:767px) {
[data-section-id="6260642eee78e95fdf168c63"]
.user-items-list-item-container.user-items-list-banner-slideshow ul {
    height: 45vh !important;
    min-height: unset !important;
}
.slide-content.list-item-card-background {
    max-width: 100% !important;
    margin: 0 !important;
}
}}

 

Thank you for the response, for some reason this code doesn't seem to adjust the height, it is also giving me a missing opening error.

Hi, I am trying to change the height of the slideshow banner at the top of this page so that it is smaller and users don't have to scroll to reach the next part of the page https://www.cucumberfields.co.uk/

I have tried using the code you have shared above but it doesn't change anything. Can you offer any other suggestions? Thank you

7 minutes ago, GailCucumber said:

Hi, I am trying to change the height of the slideshow banner at the top of this page so that it is smaller and users don't have to scroll to reach the next part of the page https://www.cucumberfields.co.uk/

I have tried using the code you have shared above but it doesn't change anything. Can you offer any other suggestions? Thank you

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. Add these code on the very bottom on the Custom CSS section. You can change height value 80vh to as your need like 85vh or 75vh.....

html body:not(.sqs-edit-mode-active) .wm-slider-container {
    height: 80vh !important;
}

Oh great thank you - this has worked! 🙂

Next question... I need to change the font of Heading 2 font to the one that's currently programmed with Heading 4.  Any ideas?

3 minutes ago, GailCucumber said:

Next question... I need to change the font of Heading 2 font to the one that's currently programmed with Heading 4.  Any ideas?

Yes, here is the code

h2 {
    font-family: 'Fields of Wildflowers' !important;
}

Where do I use this code? 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS. at bottom

OK thanks, I have don that. Whilst it now comes up as the same font, the size is too big and I want it the same size as Heading 4 - could you tell me what code I need for that?

4 minutes ago, GailCucumber said:

OK thanks, I have don that. Whilst it now comes up as the same font, the size is too big and I want it the same size as Heading 4 - could you tell me what code I need for that?

You can change the size on design section. Follow the instructions in the images.

Great thank you. You are so helpful!

I'm trying to do the same as Gail here - but I'm having trouble.

Gail - what banner module did you use? I'm not seeing the option to have text overlay as well as the arrows, etc. Could you direct me?

In Squarespace 7.1 there's one option in the "Intro" category of sections near the bottom that includes arrows and text, but buttons appear underneath?

Then there's the pure image-gallery section which doesn't permit text over the image. 

I feel I must be missing just finding this object?

On 2/7/2024 at 9:10 AM, Zaud said:

I'm trying to do the same as Gail here - but I'm having trouble.

Gail - what banner module did you use? I'm not seeing the option to have text overlay as well as the arrows, etc. Could you direct me?

In Squarespace 7.1 there's one option in the "Intro" category of sections near the bottom that includes arrows and text, but buttons appear underneath?

Then there's the pure image-gallery section which doesn't permit text over the image. 

I feel I must be missing just finding this object?

It is List Section Banner Slideshow

#1. First edit page where you want to add List Banner Slideshow > Add a Section

#2. Choose People > Choose section with (i) icon

#3. Click Edit Content

and choose Design > Banner Slideshow