Hi. My store is aromaticaparfums.com
my featured product is not showing the image on mobile version creating a blank space. Please let me
Know how to fix this:
Topic summary
A Shopify store owner reports that their featured product image isn’t displaying on mobile devices, leaving blank space instead. An attached screenshot demonstrates the issue on mobile view.
Proposed Solution:
Three respondents independently suggest the same CSS fix targeting the .featured-product-gallery #slider element. The solution involves:
- Adding a media query for mobile screens (max-width: 749px or 739px)
- Setting
float: none;on the slider element - Inserting the code into either
stylesheet.cssorbase.cssvia Shopify’s theme editor
Implementation Path:
Shopify Admin → Online Store → Themes → Edit Code → locate the appropriate CSS file and paste the code at the end.
One respondent includes a screenshot showing the expected result after applying the fix. The issue appears to stem from a CSS float property causing layout problems specifically on mobile viewports. The discussion remains open pending confirmation from the original poster.
please add this css to the very end of your stylesheet.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → stylesheet.css
@media screen and (max-width:749px){
.featured-product-gallery #slider{float: none;}
}
Please try add custom css below to fix the issue on mobile only:
@media screen and (max-width: 739px) {
.featured-product-gallery #slider {
float: none;
}
}
The result will be:
Hello @aromaticaparfum ,
I hope you’re doing well!
You can fix this in 20 seconds:
- From your Shopify Admin go to: online store > themes > three dots > edit code
- Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 749px) {
.featured-product-gallery #slider {
float: none;
}
}
If it helps you please click on the “like” button and mark this answer as a solution.
Thank you.
Kind regards,
Diego