Center Button on slideshow (Mobile Only) Prestige Theme

Store Design
1

Hi Everyone!

Can anybody help me center the button for the Prestige slideshow (Only on mobile devices)

Weblink - https://the-skincare-edit-united-arab-emirates.myshopify.com/

Password hubuth

Thanks in advance :slightly_smiling_face:

2

Hi, @Dylan_Propeller .

Thanks for your message and for sharing your store link, I really enjoyed taking a look at your shop. You have a really professional-looking design going here and some fantastic-looking products, and I can certainly see the benefit in moving that Shop now button on your slide show for further aesthetic. To confirm exactly what you are hoping for, is this the idea you are looking to achieve?

If so, this may be something your theme developer can help out with. The Prestige theme is a third-party theme developed and supported by a team called Maestrooo, you can find their contact information on our Prestige theme page here:


Sometimes third-party developers will not be willing to customize their themes further, in this case, you can either wait to see if one of our friendly community members can offer you a suggestion here, or reach out to a Shopify Expert for this potential.

I hope this helps you get on the right track to achieve this customization, feel free to reach back out here with any questions you may have!

1 Like
3

@Marty_1 , thanks so much for your help and kind words re: the design of my site!

Hopefully, someone in the community will be able to help me with this change!

See example, (only centered on mobile devices)

Slideshow Banner 1 MOBILE WITH TEXT Resized.png
Slideshow Banner 1 MOBILE WITH TEXT Resized.png1279Ɨ2288 415 KB

Kind regards,

Dylan,

4

Can anybody in the community help, please?

Iā€™m pretty sure this is the selector,

@media screen and (max-width: 768px) {
.Slideshow__Content--middleLeft .ButtonGroup,
.Slideshow__Content--bottomLeft .ButtonGroup{

}
}

but Iā€™m probably wrong!

Thanks!

5

@dmwwebartisan Would you possibly be able to help me?

Thank you in advance!

6

hello @Dylan_Propeller

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 1024px) {
.shopify-section.shopify-section--slideshow .SectionHeader__ButtonWrapper{
    display: inline-block;
    bottom: 100%;
    position: absolute;
    left: 45%;
    transform: translate(-50%, -50%);
}
}
1 Like