Remove padding around product images (mobile)

[kne603]

Looking for the best solution to remove the padding around my product images on mobile so that the edges of the image are completely flush to the edges of the screen. I am on Dawn Theme Version 15.1 and the current code I am using to achieve this is pasted below. This code achieves exactly what I want, design wise, but the only issue is that it causes the slider/carousel counter to display more images than I've actually uploaded. For instance, I have only 4 product images but the slider count is showing "< 1/5 >" . Any help with this is very much appreciated! 

<style>
@media (max-width: 749px) {
.slider.slider--mobile {
scroll-padding-left: 0 !important;
}
.slider.slider--mobile .slider__slide {
padding-top: 0px !important;
width: 100% !important;
}
}
</style>

[Mehran_Ali]

Hi @kne603 

If You could share your Store link and password if its password protected than I can help you t o remove padding

[kne603]

Hi Mehran, thanks for your quick response. I've sent you the link and password via your email. Please check. Thanks!

[Mehran_Ali]

Hi @kne603 

The slider component counts based on the width of the images, so when you adjust the width, it detects an additional slide, which updates the counter to 5.

The solution I uploaded is a jQuery script that needs to be added to the theme.liquid file, just before the closing </body> tag, within <script> tags. This JavaScript will run when someone loads the website on a mobile device and will count the number of images to update the counter. It only works on mobile screens with a width below 750px, which is the mobile view.

<script>
jQuery(document).ready(function() {
    function countListItems() {
        if (jQuery(window).width() < 750) {
            var itemCount = $('slider-component ul > li').length;
            jQuery('.slider-buttons .slider-counter .slider-counter--total').text(itemCount);
        }
    }
    countListItems();
});
</script>

I Hope this solution works for you 
If This solution works for You kindly Mark It as a Solution and Like it For keep me motivated Buy Me A Coffee

[kne603]

Hi I just tried the code in theme.liquid. It didn't seem to change anything. Still showing the extra image in the slider. Is it possible to resolve the issue at the source? Its definitely the original code that I used to remove the image padding so perhaps there's a way to update the code to achieve what I want without causing it to detect an additional image. Really appreciate your help!

[Mehran_Ali]

Yes it can be doable that you need to provide the store URL and Collaboration code so I can check in liquid to resolve that thing for you 

[Made4uo-Ribe]

Hi @kne603 

Please, share your store URL. Thanks!

[kne603]

Hi! thanks for your response. I've DM'ed you the url and password. Please check

[Made4uo-Ribe]

Thanks for the info, try this one to paste in your base.css. Thanks!

slider-component.slider-mobile-gutter {
    padding-left: 0;
    padding-right: 0;
}

And Save. 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[kne603]

I just tried the code, it didn't seem to change anything. Slider is still showing "< 1/5 >". Let me know if there's anything else you can try. Thank you.

[Made4uo-Ribe]

Oh, which one are you referring to? I didn’t see any page counters.

[kne603]

I'm referring to the slider/counter on the product image carousel (mobile view). please see the screenshot below. It is showing that I have 5 images in total but I actually only have 4.