Good morning, I found some troubles with text in the collection grid. I could I fix that?
Thank you, best regards
AI-generated summary
Main issue: text overlap in the product titles within the Shopify collection grid.
- The store URL was provided and accessible, enabling review.
- Initial fix suggested: add custom CSS in Online Store > Theme > Edit code > Assets > theme.scss.css.
- Mobile-specific solution: within a max-width: 768px media query, reduce the font size of .grid-overflow-wrapper .grid-product__title.grid-product__title–heading to 12px to prevent overlap.
- Result: the first collection grid issue was resolved.
- A similar overlap appeared on a specific collection page (ferrucciokids.it/collections/lampade-led-personalizzate).
- Global solution: set .grid-product__title.grid-product__title–heading font-size to 12px without a media query to cover that page.
- Images were provided showing overlapping titles on product cards, which helped identify the styling issue.
- Terms: “collection grid” is the product listing layout on collection pages; “theme.scss.css” is the theme’s stylesheet where custom CSS is added.
Status: resolved after applying the CSS adjustments.
Hello @simo_aresta
Could you please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.
Hi the url is ferrucciokids.myshopify.com
is pass free
Hello @simo_aresta
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.scss.css>Add this code at the bottom.
@media only screen and (max-width: 768px){
.grid-overflow-wrapper .grid-product__title.grid-product__title--heading {
font-size: 12px !important;
}
}
Thank u so much no it’s fixed. I found that I have the same issue here:
https://ferrucciokids.it/collections/lampade-led-personalizzate
Hello @simo_aresta
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.scss.css>Add this code at the bottom.
.grid-product__title.grid-product__title--heading {
font-size: 12px !important;
}
Thank you so much 