collections banner is cut off in mobile view for dawn theme

Thehandmadebar
Excursionist
19 2 0

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

 

Thehandmadebar.com

Replies 9 (9)

StoreWatchers
Trailblazer
205 30 34

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.

 

online-store.JPG

 

In your theme.liquid file, please paste the code below before the </head> tag.

{% if template == 'collection' %}
<style>
@media only screen and (max-width:768px){
.banner{
height: 185px!important;
}
.banner img{
object-fit: contain!important;
height: auto!important;
}
}
</style>
{% endif %}

Let me know if need further assistance

Regards,
Store Watchers Support Team

StoreWatchers - Automate testing for your Shopify store in seconds


If you find my reply helpful, please hit Like and Mark as Solution
Visit us: App Store | Website | FAQs
Thehandmadebar
Excursionist
19 2 0

i dont see </head> in the liquid file. the only one i see is <head>

i have attached photo44391EC1-1A66-4BA8-A789-1BFE4654B623.png

PageFly-Victor
Shopify Partner
7865 1785 3043

you can paste my code to line 34

banned

PageFly-Victor
Shopify Partner
7865 1785 3043

Hi @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 </head> of the file -> Save

 

{% if template contains "product" %}
<style>
@media(max-width:767px){
.banner__media.media,.banner__media.media img{
position:static !important
}
.banner__media.media ~ .banner__content{display:none !important}
}
</style>
{% endif %}

 

PageFlyVictor_0-1675905611501.png

 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

 
banned
Thehandmadebar
Excursionist
19 2 0

the code didnt work…The above pic is in landscape mode not portrait.

SAN_MSWEB
Shopify Expert
872 110 115

Hi @Thehandmadebar 


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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Thehandmadebar
Excursionist
19 2 0

thank you, that worked for my collections page now all others are cropped1A3448F1-5C48-4411-B9A3-90CA22C920C8.jpeg

Thehandmadebar
Excursionist
19 2 0

 thank you, that code worked for the collection page on mobile device. Now home paage is spaced and banner is shrunk. see above image

auuuthur
New Member
8 0 0

Yeah, i am facing the same issue from last 1 week