How can I disable the collection image for the mobile view only?
I want to keep the collection image for the desktop version.
https://kainosbuy.com/collections/panel-parts
I’m using Ella theme version 6.6.1
Topic summary
A user seeks to hide collection banner images on mobile devices while keeping them visible on desktop for their Shopify store using the Ella theme version 6.6.1.
Proposed Solutions:
Three respondents offered similar CSS-based approaches:
- Option 1: Add CSS code in
theme.liquidfile above the</body>tag using a media query targeting max-width 768px - Option 2: Insert code into
base.cssfile with@media (max-width: 768px)targeting.collection-bannerwithdisplay: none !important; - Option 3: Similar to Option 2, add CSS to
assets/base.cssusing@media only screen and (max-width: 768px)to hide.collection-banner
Status: Multiple solutions provided with screenshots demonstrating results. All approaches use CSS media queries to selectively hide the collection banner on mobile viewports. The discussion appears resolved with actionable code snippets, though the original poster has not confirmed which solution was implemented.
1 Like
Hello,
Please add the below code in theme.liquid above
Result:
If the above solution will be helpful please like the solution and accept it.
Thank you!
Hi @kainosbuy
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media (max-width: 768px) {
.collection-banner {
display: none !important;
}
}
Result
Best,
Liz
Hello @kainosbuy
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
@media only screen and (max-width: 768px) {
.collection-banner {
display: none;
}
}
