How can I correct the Dawn Theme product media slider count on mobile?

[nevadaskye]

Originally I was having an issue with Dawn Theme where the product media slider images were not centering in the middle of the page for mobile (see first two attached images "IssueEx"). I was able to remedy this issue by changing scroll padding left:0 and adding 25px of padding to the left and right under component-slider.css. However now the slider count is incorrect, as it is showing there is one more photo than there actually is (see last two attached images). Is there a simple way to change the output of the slider counter to -1? Any push in the right direction would be greatly appreciated. 

 

 

 

 

[EBOOST]

Hi @nevadaskye 

Could you share your store url and password? I will help check it.

[nevadaskye]

https://eggculture.com/password
password: h6jbRk3zCxaPaBn

[EBOOST]

Hi @nevadaskye 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/theme.liquid
3. Add code below to bottom of file before </body> tag

{% if template contains 'product' %}
<style>
	@media(max-width: 749px){
		.grid--peek.slider .grid__item:first-of-type {
			margin-left: 0!important;
			display: block!important;
		}
		.product__media-list .product__media-item {
			width: 100%!important;
		}
		.slider.slider--mobile .slider__slide {
			padding: 0!important;
			width: 100%!important;
		}
               .grid--peek.slider .grid__item:last-of-type{ margin-right: 0!important;}
	}
</style>
{% endif %}

[nevadaskye]

That worked to add padding to the right of the last image which is step in the right direction; However, is it possible to have the media image centered in the middle of the page and eliminate the peek of the next picture? 

[EBOOST]

Hi @nevadaskye 

Did you add code above? I can't see it on site now.

[nevadaskye]

@EBOOST check again now please

[EBOOST]

Hi @nevadaskye 

replace code above with code below

{% if template contains 'product' %}
<style>
	@media(max-width: 749px){
		.grid--peek.slider .grid__item:first-of-type {
			margin-left: 0!important;
			display: block!important;
		}
		.product__media-list .product__media-item {
			width: 100%!important;
		}
		.slider.slider--mobile .slider__slide {
			padding: 0!important;
			width: 100%!important;
		}
		.slider.slider--mobile {
			scroll-padding-left: 0!important;
		}
		.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
			margin-left: 0!important;
    		margin-right: 0!important;
		}
	}
</style>
{% endif %}

[nevadaskye]

@EBOOST Please check personal messages

[takeoverapparel]

Hey i used this code to add to my shopify dawn theme. When I added it. It miscounts the image. Like for one product I have 5 product pictures but once I added the code it says 6

[takeoverapparel]

my website is www.takeoverapparel.com and password is takeover

[EBOOST]

Hi @takeoverapparel ,

You try to code below:

{% if template contains 'product' %}
      <style>
        @media(max-width: 749px){
        	.grid--peek.slider .grid__item:first-of-type {
        		margin-left: 0!important;
        		display: block!important;

        	}
        	.product__media-list .product__media-item {
        		width: 100%!important;
        	}
        	.slider.slider--mobile .slider__slide {
        		padding: 0!important;
        		width: 100%!important;
        	}
        	.slider.slider--mobile {
        		scroll-padding-left: 0!important;
                gap: 0;
        	}
        	.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
        		margin-left: 0!important;
           		margin-right: 0!important;
        	}
        }
      </style>
    {% endif %}

We only need  to add a code to fix it