Dawn Theme - Image Cut Off On Mobile View. Please help 😭

Solved

Dawn Theme - Image Cut Off On Mobile View. Please help 😭

fahmicrile
Tourist
5 0 1

Hey all! 😁

I'm currently using Dawn Theme for me website & I noticed that the banner photo looks great but when I switched it to mobile version, it get cuts off at both ends. I tried so much suggestions online, but none of them worked. Please refer to the photos below for your reference - 

 

Screen Shot 2023-10-23 at 9.23.40 PM.pngWeb Version

 

 

 

WhatsApp Image 2023-10-23 at 9.26.31 PM.jpegMobile Version

 

 

 

 

 

 

 

Any help would be greatly appreciated! Thanks in advance!

Accepted Solution (1)
Moeed
Shopify Partner
5877 1594 1897

This is an accepted solution.

Hey @fahmicrile 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.slideshow__media.banner__media.media img {
    object-fit: contain !important;
}
</style>

RESULT:

Moeed_0-1698384994425.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
5877 1594 1897

Hey @fahmicrile 

 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


fahmicrile
Tourist
5 0 1

Hey Moeed!

 

Thanks for reaching out! Is there any way I can share with you my password in private? Many thanks once again!

Moeed
Shopify Partner
5877 1594 1897

This is an accepted solution.

Hey @fahmicrile 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.slideshow__media.banner__media.media img {
    object-fit: contain !important;
}
</style>

RESULT:

Moeed_0-1698384994425.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


fahmicrile
Tourist
5 0 1

Hi Moeed you're a legend! It works on mobile view now 😁 Just one last question please! Do you think its possible for the photo to cover the gray vertical spaces? Thanks once again!

Moeed
Shopify Partner
5877 1594 1897

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


ChantelleM24
Visitor
1 0 0

Hi.

I've tried to follow above but it doesn't work for me. See screenshot. The left side is all cut off.