How can I shift the slideshow dots to the right side?

Store Design

Topic summary

A user wants to reposition slideshow navigation dots to the right side of their mobile view. Two solutions were provided:

Solution 1 (Zeel-prajapatii):

  • Add CSS code to component-slider.css
  • Targets screens max-width 768px
  • Uses absolute positioning with z-index 9999, top 89%, right 5px

Solution 2 (PageFly-Henry):

  • Edit base.css file in theme code editor
  • Add media query for max-width 767px
  • Uses flexbox properties (flex-direction: row, justify-content: flex-end)
  • Targets .slideshow-component.slider-mobile-gutter class

Both responses include step-by-step instructions for implementing the CSS changes. The discussion remains open with no confirmation of which solution worked.

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

IMG_4110.jpeg
IMG_4110.jpeg1170×2532 298 KB

how do I move the 3 dots on the slideshow to the right hand side as shown in the image this is my store url: https://uo1oiiyhyg6lhb4w-79986622787.shopifypreview.com

2

@ti7 please add below code to the component-slider.css file.

@media screen and (max-width:768px){
.slideshow__controls.slider-buttons.no-js-hidden {
    position: absolute!important;
    z-index: 9999!important;
    top: 89%;
    right: 5px;
}
}
3

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-component.slider-mobile-gutter {

flex-direction: row !important;

justify-content: flex-end !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly