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

anlupapeltapiz
Tourist
19 0 2

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>

0 Likes
tiaz-ltd
New Member
2 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.

 

0 Likes
anlupapeltapiz
Tourist
19 0 2

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

0 Likes
tiaz-ltd
New Member
2 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;
}
0 Likes
anlupapeltapiz
Tourist
19 0 2

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.

0 Likes