For mobile view only could you move the arrows to here (in red) then remove the bit in green?

Store Design
, ,

Topic summary

A user requested a mobile-only design change to reposition navigation arrows and remove a specific element on their product page.

Solution Provided:

  • Add custom CSS code to the base.css file in the Shopify theme editor
  • The code repositions slider buttons to center (50% top/left) with full viewport width
  • Hides the slider counter element
  • Changes are wrapped in a media query targeting screens 749px and below (mobile only)

Outcome:
The solution was implemented successfully. The user confirmed satisfaction with the help provided, and the issue appears resolved.

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

For mobile view only could you move the arrows to here (in red) then remove the bit in green?

PHOTO-2024-07-14-16-07-00.jpg
PHOTO-2024-07-14-16-07-00.jpg946×2048 162 KB

2

Hi @Ryan1998 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css

Step 3: Insert this code:

@media only screen and (max-width: 749px) {
   .slider-buttons {
     top: 50%;
     left: 50%;
     width: 100vw;
     justify-content: space-between !important;
     transform: translate(-50%, -50%);
     position: absolute;
   }

  .slider-counter {
    display: none !important;
  }
}

Here is result:

BSSCommerceHDL_0-1720972414877.png
BSSCommerceHDL_0-1720972414877.png504×667 109 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

You’re always here helping, thank you!

1 Like
4

@Ryan1998 , I’m happy to always be able to help you :heart_eyes:

1 Like