Re: collections banner is cut off in mobile view for dawn theme

Thehandmadebar · ‎02-08-2023

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

StoreWatchers · ‎02-08-2023

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 </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 · ‎02-08-2023

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

i have attached photo

PageFly-Victor · ‎02-08-2023

you can paste my code to line 34

PageFly-Victor · ‎02-08-2023

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 %}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

Thehandmadebar · ‎02-08-2023

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

INA_MSWEB · ‎02-09-2023

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: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Thehandmadebar · ‎02-09-2023

thank you, that worked for my collections page now all others are cropped

Thehandmadebar · ‎02-09-2023

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 · ‎11-18-2023

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

Re: collections banner is cut off in mobile view for dawn theme

collections banner is cut off in mobile view for dawn theme

StoreWatchers - Automate testing for your Shopify store in seconds

Community Blog Articles