Issue: On Shopify, banner images stacked on mobile with a fixed animation effect work correctly, but on desktop a custom CSS rule makes the first image full width while the second overlaps it.
Details: The CSS added to base.css was: .banner__media.banner__media-half.animate–fixed:first-child>img { width: 100%; }. In the post, the selector shows an unexpected space in “b anner__media-half,” which may indicate a typo, though this wasn’t confirmed.
Support request: Another participant asked for the store URL and screenshots to diagnose the problem.
Resolution: The original poster later stated they found a solution and fixed the issue, but did not share the fix or root cause.
Outcome: Resolved by the OP. No documented steps or code changes for others to follow; no media or link was provided. The thread remains closed-ended without actionable guidance for similar desktop overlap cases.
Hi there,
I stacked the baner images in mobile version then I added fixed animation and it works perfectly.
But on desktop i added this code to the base.css
.banner__media.banner__media-half.animate–fixed:first-child>img {
width: 100%;
}
First image is full width but the second one is still showing over the first picture.
Any Ideas ? Thank you.
Hi,
Please share store url and screenshots of error
Finally found the solution and fixed it !! Thnak you