I did it! The Collection list no longer displays collection names either on the phone or computer. They also respond to clicks and redirect to the collection page. If anyone needs help, enter this code into theme.liquid immediately after :
/* .card__content elementų parodymas tik telefonuose */ @media only screen and (max-width: 767px) { .collection-list .card__content { opacity: 1; height: auto; } } /* Visose įrenginių dydžio diapazonuose paslepia .card__content */ .collection-list .card__content { opacity: 0; height: 0; }Topic summary
Issue Identified:
A user attempted to hide collection names (e.g., “BMW”, “Dodge”) beneath collection list images by adding CSS to the Base.css file. The changes displayed correctly on desktop but failed to apply on mobile devices.
Solution Provided:
Another user suggested adding CSS code directly to the theme.liquid file, immediately after the <head> tag, rather than modifying Base.css. This approach uses media queries to control visibility across different screen sizes.
Resolution:
The original poster successfully implemented the fix using custom CSS in theme.liquid. Collection names now remain hidden on both desktop and mobile devices, while maintaining clickable functionality that redirects to collection pages.
Key Technical Detail:
The solution involved targeting .collection-list .card__content with opacity: 0 and height: 0, combined with responsive media queries to ensure consistent behavior across devices.
