YOU ARE AMAZING! Thank you this worked a treat!
Topic summary
A Shopify store owner using the Dawn theme needed to resize featured collection images on the homepage for desktop view only, as the images were taking up the entire screen and looking disproportionate.
Initial Problem:
- CSS code found online resized images for both mobile and desktop, making mobile images too small
- Desktop images remained oversized and visually unappealing
Solution Process:
A support representative provided CSS code using media queries targeting desktop screens (min-width: 750px). The initial attempts had alignment issues, creating large gaps between product images and descriptions.
Final Working Solution:
CSS code targeting both .collection .card__inner and .collection .card__information with:
- Width set to 60%
- Margin set to auto with
!importantflags - Applied only to screens 750px and wider
This successfully resized desktop images while maintaining proper mobile display and alignment between product images and descriptions.
Status: Resolved. The user confirmed the solution worked perfectly.
1 Like