Issue with Mobile Carousel Layout

[SPdas]

I'm experiencing an issue with the mobile version of my carousel on Trade Theme. I have a product slider where each product should take up 100% of the screen width, but on mobile, the second product is partially visible while the first product is in view. How can I make each slide in the carousel take up 100% width on mobile without showing part of the next product?

[aces01]

It need to be aligned from the media section
Would you mind few help?

[Ibsalesagency]

hey  @SPdas 
It sounds like your carousel’s width calculation or overflow settings are causing the issue. Here’s how you can fix it in your Trade Theme on Shopify
are you open to more discussion?

[SPdas]

No, I did it myself. if you have a solution please let me know.

[SPdas]

I attempted to apply the provided code to both the feature collection CSS and base.CSS, but unfortunately, it didn't work. I couldn't locate the carousel setting the only available option is to turn it on or off. Please see the image below for your review and you can also check the following URL: https://splendas.com/.

[tim]

@SPdas, consider looking at this from another point of view: this is done intentionally to hint that this element is a carousel and that it can be swiped left and right.

I see no arrows or dots -- usual signs that element is a carousel...

[SPdas]

Tim, an arrow is cropped. Please take a look at this website URL https://splendas.com/ 

[tim]

In this case paste this into "Custom CSS" setting of this section:

@media screen and (max-width: 989px) {
  .collection .slider.product-grid {
    scroll-padding-left: 0;
  }

  .collection .slider li {
    width: 100%;
  }
}

Will stretch your slide to full-bleed on mobile:

If you want some space around, add something like:

.collection {
  padding-left: 1rem;
  padding-right: 1rem;
}