Hi! Thanks. This helps a lot but I cant understand how to do it. Can you please provide the code to be added + where it should be added _ the code to change.
TYSM!
Topic summary
A Shopify store owner is experiencing display issues with a custom collection list on their site (faithandyou.in). The collection carousel autoplays every 2.5 seconds but has two main problems:
Issues identified:
- Collection images appear too small on mobile devices
- Images get cut off on the right side on desktop view
Proposed solution:
A community helper (DaisyVo) suggested adding custom CSS to adjust the mobile width from 23% to 50% to make images larger. The code targets .swiper-slide.custom-slider-slide.grid__item within a media query for screens up to 768px.
Current status:
The original poster tried the CSS fix but reported it didn’t work as expected. DaisyVo then suggested a more complex solution involving creating separate blocks for desktop and mobile versions, with the mobile version displaying 6-7 images and adjusting the width to 50%. However, the poster is struggling to implement this solution and has requested a video tutorial showing exactly where and how to add the code. The discussion remains open with the poster awaiting further clarification.