Jump to content

How to center button in slideshow?

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://bonjrmusic.com/faq

Hi,

How do I center the button element ("license" &  "stream" buttons) here using css?

Also, how can I ensure that each slide's box (the outer transparent box that contains title, description, button) is always centered? i.e. the left image the box is almost centered and the right image the box is more to the top

For context, I believe this is a slideshow section
d1db36b347e6162a468e372500fd0418.png1281d9c0f0944c382b3d5e6b37636473.png

I would also like to vertically center the slideshow navigation buttons that were previously placed at the bottom in the images above & space them apart so that they're attached to the edge of the screen. In the desktop version it's the offset parameter so I was already able to achieve this, however I have not been able to find the equivalent setting for mobile. Attaching a screenshot below of what I have been able to achieve so far, which is not much considering the buttons are not centered with the background and the spacing is not correct.

And if possible, I'd like to also change the navigation button radius. I was successful in doing this on the desktop version of the page.

a85d6c81831c937e67e1d19bd9e01e25.png

Thanks in advance!

Daniel

Edited by thefakedaniel
Link to comment
  • Replies 6
  • Views 839
  • Created
  • Last Reply

Top Posters In This Topic

Center on mobile only?

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-banner-slideshow[data-button-alignment="left"] .list-item-content__button-container {
    text-align: center;
}
}

If you want center on all devices, edit 767px to 9999px

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 4/18/2022 at 1:17 PM, tuanphan said:

Center on mobile only?

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-banner-slideshow[data-button-alignment="left"] .list-item-content__button-container {
    text-align: center;
}
}

If you want center on all devices, edit 767px to 9999px

Hi, thanks for replying.

This doesn't seem to have worked, and also I am referring to the whole box, not just the text. I have already been able to center the text myself ;o

Link to comment
On 4/19/2022 at 10:04 PM, thefakedaniel said:

Hi, thanks for replying.

This doesn't seem to have worked, and also I am referring to the whole box, not just the text. I have already been able to center the text myself ;o

Try it again. Recently SS has a bug so CSS won't work on editing mode.

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
  • Solution

Try this CSS

@media screen and (max-width:767px) {
.user-items-list-banner-slideshow[data-card-horizontal-position="left"] .slide {
    justify-content: center !important;
    align-items: center !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
On 5/1/2022 at 10:00 AM, tuanphan said:

Try this CSS

@media screen and (max-width:767px) {
.user-items-list-banner-slideshow[data-card-horizontal-position="left"] .slide {
    justify-content: center !important;
    align-items: center !important;
}
}

 

Yep, this is it, 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.