@Mitch23 - you are using slick slider for your collection, please check its code and settings to try to reduce the padding in between and increase images size.
Topic summary
Main issue: Homepage layout problems after customizations. The collection list was turned into a carousel with thick spacing, inconsistent item sizing, and difficulty adding additional carousels. Text in “image with text overlay” sections does not scale well on mobile.
Latest update: A helper identified the carousel as using Slick slider (a JavaScript carousel plugin). They advised adjusting its code/settings to reduce padding and increase image sizes. They provided the Shopify path to access code (Online Store > Themes > … > Edit code) and clarified that the user’s screenshot showed CSS, but the relevant changes are in JavaScript.
Actions/next steps:
- Inspect and modify the Slick slider JavaScript config to control spacing and sizing.
- Consider hiring an expert if not comfortable editing JavaScript.
Status: No fix implemented yet. The mobile text scaling issue for overlays and other texts remains unaddressed in the guidance. Discussion is ongoing with open questions about the exact code changes needed.
Notes: An image was shared showing the CSS section, but it’s not essential to understanding; the key work is in the JavaScript files/config.