My slide button moves everywhere depending on the size of the screen!

anlupapeltapiz
Excursionist
25 0 4

Hello! i manage to center the button in the slideshow in homepage but now it is not fixed and it moves everywhere depending on the width/size of the screen.

Here is the code im using. Hope you can help me!

<a href="{{ block.settings.button_link }} "class="slides__btn btn" style="text-align: center; display: block; width: 17%; margin-top: 0px; margin-left: 230px; position: absolute">
{{ block.settings.button_label | escape }}
</a>

Replies 4 (4)

tiaz-ltd
Shopify Partner
5 0 0

Hi,

You have selected the position as "absolute", change it to "relative" or "static", if it didn't work send the link of your store will tell you the exact solution.

Thanks,

Tiaz Ltd.

 

anlupapeltapiz
Excursionist
25 0 4

Than you for your answer!

It didn´t work, so here is the link to my store.

https://anlu-papel-tapiz.myshopify.com/admin/themes/124887269527?key=sections/slideshow.liquid

tiaz-ltd
Shopify Partner
5 0 0

add these lines of code in your "theme.scss.css" file.

ul.slides li#slide--slideshow-0 {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
}
ul.slides li#slide--slideshow-0 .slides__text-content {
    width: 100%!important;
    top: auto;
}
ul.slides li#slide--slideshow-0 .slides__text-content .slides-text-content-wrapper-center {text-align: center!important;}
 
ul.slides li#slide--slideshow-0 a.slides__btn.btn {
    margin: 0 auto!important;
display: inline-block!important;
width: auto!important;
}
anlupapeltapiz
Excursionist
25 0 4

Thank you!!

It did work but now the button in the first slide has different style than the other 2. How can i make the 3 look the same?? 

And also, i would like to align vertically the button because now it is just horizontally align.

Hope you can help me.