Call to Action Button Position

Hello, someone recently helped me with the following CSS to put a semi-transparent background behind my slider text, so the text stands out. The background runs the width of the slider text. It looks great!

.slides-container .contain {
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 20px 0;
display: inline-block;
border-radius: 10px;

BUT…the “display: inline-block” is forcing my call to action button to line to the right of the slider text, instead of below it (I guess because it’s in the same container) If I remove the “display: inline-block”, that puts the call to action back below the slider text, but it also affects the transparent background under the slider text - instead of fitting the width of the text, it stretches across the entire screen.

Is there CSS I can use to keep the call to action button centered underneath the slider text, without affecting the styling above?


Can you share the URL of your site here?

I am having the same challenge. My URL is


Please add CSS code below to fix the issue to: Customize > additional CSS

.roll-button.button-slider {
    display: flex;
    width: 155px;
    margin: 10px auto;