Adding padding to featured collection section (mobile view)

[emilyaugstudios]

Hi community, can anyone help me on my featured collection section for mobile view, there seems to be no padding to the left hand side of the last product displayed, so the image goes right up to the edge of the screen. How can I add padding to that side of the last image on mobile only? Hope that makes sense 🙂

URL – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1&preview_theme_id=144118972631

[BSS-TekLabs]

<style>
@media (max-width: 767.98px) {
    .slider--mobile-container-pad {
        margin-right: 14px !important;
    }
}
</style>

[BSS-TekLabs]

- Here is the solution for you @emilyaugstudios 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media (max-width: 767.98px) {
    .slider--mobile-container-pad {
        margin-right: 14px !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B · Accepted solution]

@emilyaugstudios , Here is the solution for you to maintain the slider image size.

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.collection-listing .slider__item:last-of-type {
   margin-right: -16px;
}
.collection-listing .slider__item:last-of-type product-block{
   padding-right: 16px;
}
</style>

Result