My mobile view banner looks very blurry but clear on desktop. Can someone help me on this please?
Website : https://nothingchanges.com.my/
Password : kyle12477
Topic summary
A user reports that banner images appear blurry on mobile devices while displaying clearly on desktop across multiple pages of their Shopify store.
Affected Pages:
- Homepage
- Women’s collection
- Men’s collection
- Eid collection
- New arrivals
- About us page
Proposed Solution:
Another user suggests adding custom CSS code to adjust the banner minimum height on mobile devices (screens under 749px width). The code targets the .banner--large class and sets min-height: 97vh.
Implementation Steps:
- Navigate to Online Store → Theme → Edit Code
- Locate base.css, theme.css, style.css, main.css, or custom.css
- Add the provided CSS media query at the end of the file
Status: The issue remains unresolved as the user has requested additional help for all affected pages. It’s unclear whether the CSS solution addresses the underlying image quality/resolution problem or only adjusts banner sizing.
Hi @nothingchanges ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
@media screen and (max-width: 749px) {
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 97vh !important;
}
}
Could you help me with this too?
these are the pages that appears blurry on mobile but clear on desktop :
https://nothingchanges.com.my/
https://nothingchanges.com.my/collections/women
https://nothingchanges.com.my/collections/men
https://nothingchanges.com.my/collections/eid-25-the-eid-venture-of-alys