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

[takeoverapparel]

Hello can you help me fix my picture. There not all the way in the middle some of the other picture is still showing on the page on mobile. This is my site www.takeoverapparel.com and password is takeover

[EBOOST]

Hi @takeoverapparel ,

Which issues are you facing? Could you please let me know details?

[takeoverapparel]

I just texted you