In collections when I click a product, the banner on mobile device is cut off. I have tried a few codes listed in the discussions but none are work. I am using dawn theme.
TIA
Hello @Thehandmadebar ,
Greetings from the Store Watchers Support Team! Happy to help you today.
Go to Online Store → Actions → Edit code. Then find theme.liquid.
In your theme.liquid file, please paste the code below before the tag.
{% if template == 'collection' %}
{% endif %}
Let me know if need further assistance
Regards,
Store Watchers Support Team
Hi [email removed]Thehandmadebar,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid.
Step 3: Paste the below code at before of the file → Save
{% if template contains "product" %}
{% endif %}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
the code didnt work…The above pic is in landscape mode not portrait.
you can paste my code to line 34
I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).
Please add this css in your bottom of the css file:
@media screen and (max-width: 749px) {
.banner__media.media {background-color: #fff !important;}
.banner__media.media img {object-fit: none !important; object-position: top center !important;}
}
@media screen and (max-width: 649px) {
.banner {height: 272px !important;}
}
@media screen and (max-width: 549px) {
.banner {height: 222px !important;}
}
@media screen and (max-width: 449px) {
.banner {height: 172px !important;}
}
@media screen and (max-width: 342px) {
.banner {height: 149px !important;}
}
Regards,
Santanu
thank you, that code worked for the collection page on mobile device. Now home paage is spaced and banner is shrunk. see above image
Yeah, i am facing the same issue from last 1 week