Carousel on mobile shifting on swipe Dawn theme

Store Design
,
1

Hi,

Carousel on mobile is shifting when swiping left and shows blank white. Looks perfect on shopify customisation but not when using the actual phone. I have tried multiple phones but same results.

It only happens when OVERFLOW is on AUTO and works properly if it is changed to NONE but i loose that fluidity it has on AUTO.

Current code:

    @media screen and (max-width: 767px){
   .featured-collection-slider .flickity-button {
    display: none !important;
  }
   .flickity-slider {
      overflow-x:auto!important;
    overflow-y:none!important;      
    }
   }

IMG_4804.jpeg
IMG_4804.jpeg1284×1196 51.4 KB

IMG_4802.jpeg
IMG_4802.jpeg1284×1386 42.4 KB

2

Hi @Javsi

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. add code below to bottom of file
@media screen and (max-width: 767px){
    .featured-collection-slider {
    	overflow: hidden;
    }
    .featured-collection-slider .products-carousel {
    	margin: 0 -12px;
    }
 	.featured-collection-slider .flickity-enabled.is-draggable .flickity-viewport {
 		height: auto!important;
    	overflow-x: auto;
 	}
    .featured-collection-slider .section-header {
    	padding: 0 12px;
	}
    .featured-collection-slider  .flickity-slider {
      	overflow: inherit!important;
	    transform: none!important;
	    position: static;
	    display: flex;
	    width: fit-content;
    }
    .featured-collection-slider .carousel-cell {
	    width: 62vw!important;
	    padding: 0 12px;
	    position: static!important;
	    transform: none!important;
	}
	.featured-collection-slider .carousel-cell:first-child {
		margin-left: 4%;
	}
	.featured-collection-slider .carousel-cell:last-child {
		margin-right: 4%;
	}
}
3

Thank you very much. I am still looking for a way to have margins on first and last child without shrinking the products in carousel.