css How can I use CSS to bring the slideshow banner buttons higher?

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

I'm using squarespace 7.1

I have two separate sections on this homepage for the slideshow banner.  One is strictly for the desktop version and the other is strictly for the mobile version.

On the mobile version, I would like to bring the slideshow control buttons higher so there is less wasted space between the buttons and the artwork.  This is only for the mobile display of my website, the desktop display is fine.  

Thank you

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="624cb8c2ff29110fe05c5da7"] ul.slides.slides--initialized {
    height: 40vh !important;
    min-height: unset !important;
}
}

7 hours ago, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="624cb8c2ff29110fe05c5da7"] ul.slides.slides--initialized {
    height: 40vh !important;
    min-height: unset !important;
}
}

 

Hello TuanPhan, thank you for this.  It is very useful and I'm able to reduce the vertical height of the banner image.  For me I think the sweet spot is 70vh.  Currently I have it set to 80vh just so the top text isn't obscuring the artwork (as it is in the attached image with vh set to 70).

Would you know how to separately move the title text "Discover Your Inner Artist" higher so there isn't so much space between the top header and this title text?

I truly appreciate your help.

16 hours ago, duncan02 said:

Hello TuanPhan, thank you for this.  It is very useful and I'm able to reduce the vertical height of the banner image.  For me I think the sweet spot is 70vh.  Currently I have it set to 80vh just so the top text isn't obscuring the artwork (as it is in the attached image with vh set to 70).

Would you know how to separately move the title text "Discover Your Inner Artist" higher so there isn't so much space between the top header and this title text?

I truly appreciate your help.

Move title text high, outside of dog image?

On 6/2/2022 at 3:44 AM, tuanphan said:

Move title text high, outside of dog image?

Hi Tuanphan, yes to move the text higher above the dog image.

On 6/6/2022 at 11:07 PM, duncan02 said:

Hi Tuanphan, yes to move the text higher above the dog image.

Try this CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="624cb8c2ff29110fe05c5da7"] h2 {
    position: relative;
    top: -50px;
}
}