How to center button in slideshow?

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


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.



Thanks in advance!

Daniel

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

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

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.

On 4/22/2022 at 3:29 PM, tuanphan said:

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

Ah, perfect it worked!

And how about the actual boxes, how could I center those?



Example:

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!