Jump to content

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

Recommended Posts

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

IMG_1873.jpeg

Link to comment
  • Replies 5
  • Views 395
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

IMG_1878.PNG

Link to comment
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.

IMG_1878.PNG

Move title text high, outside of dog image?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.