How can I relocate a slideshow button to the bottom left?

Store Design

Topic summary

A user seeks to reposition slideshow elements on their Shopify store’s mobile view. They want to move a button to the bottom left and navigation dots to the right side.

Solutions Provided:

  • PageFly-Henry offers CSS code to be added to the base.css file, targeting the slideshow text container with specific padding adjustments for mobile devices (max-width: 767px)

  • Anshul_arora suggests alternative CSS targeting .banner__buttons with padding modifications, providing a visual output example

Current Status:

The initial button repositioning was successfully implemented. The user then requests help moving the three-dot navigation indicators to the right side. PageFly-Henry responds with additional CSS code using flexbox properties (flex-direction: row and justify-content: flex-end) for the slideshow component.

Multiple images are referenced showing the desired layout changes and results.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

IMG_4103.jpeg
IMG_4103.jpeg1170Ă—2532 314 KB

Hi how can I move this button on my slideshow to bottom left as shown in the image as there is no option to. This is my store url: https://uo1oiiyhyg6lhb4w-79986622787.shopifypreview.com

2

Hi @ti7

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.slideshow__text.banner__box.content-container.content-container–full-width-mobile.color-accent-2.gradient.slideshow__text–center.slideshow__text-mobile–left {

padding-left: 10px !important;

padding-top: 200px !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hello @ti7 ,

I understand you are looking to move the banner button.

Please add the below mentioned code in your store base.css file.

.banner__buttons {
padding: 13rem 0 0 0;
}

Output -: https://prnt.sc/Bqicui7GqsY1

Anshul_arora_0-1707897927427.png
Anshul_arora_0-1707897927427.png575Ă—622 203 KB

I hope the code helps you.

Please let me know if you have any query.

Thank you.

4

IMG_4110.jpeg
IMG_4110.jpeg1170Ă—2532 298 KB

Hi thank you it worked perfectly is there a way to move these 3 dots circled to the right side as shown in the image. Same store url

1 Like
5

You can try with this code:

@media (max-width: 767px){
slideshow-component.slider-mobile-gutter {
flex-direction: row !important;
justify-content: flex-end !important;
}}