I recently added a code to stop banners on collections becoming resized when viewed on mobile. By doing so it resized other images. See example of Yelp icon here; https://www.theclosettradingco.com/pages/santa-barbara - How can I ensure that my banners are not resized on mobile, but that the rest of my images are not resized?
Topic summary
A user applied CSS code to prevent collection banners from resizing on mobile devices, but this inadvertently caused other images (like a Yelp icon) to become oversized.
Root Cause Identified:
The problematic CSS rule applies width: 100%!important and height: auto!important to all <img> elements on the page, affecting more than just the intended banners.
Recommended Next Steps:
- Review the specific code that was added
- Provide more details to allow for a targeted solution
- Likely needs a more specific CSS selector that targets only collection banners rather than all images
Status: Issue diagnosed, awaiting user response with additional code details for a proper fix.
Hi @tctcecomm
We checked and saw that this code affects all the images on the page:
img {
border: 0;
width: 100%!important;
height: auto!important;
}
You can check it and get back to us with more information. It can be the code you added or something like that. Then we can check it for you and suggest you a solution.