Phone version shows beginning of the next picture

Topic summary

Main issue: On mobile in the Shopify Ride theme, the carousel shows the beginning (“peek”) of the next image; the requester wants only the current image visible.

Context: A helper asked for the store URL and any password. The store link (diversleague.com) was provided; no password was shared.

Proposed fix: Edit the theme’s base.css and add a mobile-only CSS rule (media query at max-width: 749px) that sets the .grid–peek.slider–mobile element to width: 105% !important. This adjustment removes the visible edge of the next slide on phones. Briefly: a CSS media query targets mobile, and the .grid–peek.slider–mobile class controls the mobile slider layout.

Evidence: Before/after screenshots were shared; images are central to understanding the issue and the result.

Status: The fix has been proposed with step-by-step instructions, but the original poster has not yet confirmed success. The thread appears open pending confirmation.

Summarized with AI on December 26. AI used: gpt-5.

Hello,

i have the problem, that in the phone variant the beginning of the next picture is showing.

How can i remove that, so you can only see the current picture?

Using Ride Theme.

Hello.
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

Hi,

Website: https://www.diversleague.com/

What access password do you need?

  • Here is the solution for you
  • Please follow these steps:

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (max-width: 749px) {
    .grid--peek.slider--mobile {
       width: 105% !important;
    }
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

@PulsePages