A user encountered an issue where product images on collection pages stopped loading in the Dawn theme.
Multiple community members provided a CSS solution to fix the problem by adding specific code to the base.css file:
.card .media { position: relative !important; }
.media img { position: relative !important; }
.card-wrapper:hover .media.media--hover-effect > img + img {
position: absolute !important;
top: 0;
left: 0;
}
The CSS should be added at the bottom of the base.css file via: Online Store > Themes > Edit Code > Assets > base.css.liquid
After applying the fix, images began loading again. However, a secondary issue emerged where images aren’t filling the grid properly as they do in the Dawn theme demo. This spacing/sizing problem remains unresolved and is the current focus of the discussion.
Hello,
.card .media {
position: relative !important;
}
.media img {
position: relative !important;
}
.card-wrapper:hover .media.media--hover-effect > img + img {
position: absolute !important;
top: 0;
left: 0;
}
Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Like this
Hover Effect
Like This
