A user encountered a white bar appearing underneath featured collection images on mobile devices only—not visible in desktop preview mode but present when testing on an actual phone.
Proposed Solution:
base.css fileImplementation Steps:
base.css fileThe solution uses a mobile-specific media query to eliminate the unwanted visual element without affecting desktop display. The issue appears to be CSS-related rather than a structural problem with the images themselves.
for some reason my images for my featured collection have this white bar underneath them on mobile only and i am not sure how to remove it. it only shows up when i test my site on my phone, not when i click the mobile response in preview.
it should look like this
thanks!
password: melon
Hello Tinypebble,
To remove the white bar underneath the images for your featured collection on mobile devices,
you can use custom CSS targeting mobile screens specifically.
Here’s how you can do it:
Go to theme editor > edit code > Find the base.css file and add the given code at the bottom
/* Target mobile screens (up to 767px width) */
@media only screen and (max-width: 767px) {
/* Remove underline from images in the featured collection */
.color-background-2{
gradient-background: none;
}
}
Save Changes.
I hope this is helpful to you,
If helpful So please accept the solution and buy me a coffee.
