Solved

How can I adjust the aspect ratio of my Dawn theme slideshow on mobile?

gyggle
Tourist
6 0 0

I have a Dawn shopify theme with a slideshow as a banner. On the Desktop version, it works fine, but on the mobile, the width of the image is cropped. How could I have the slideshow's aspect ration adjusted to accommodate for this change on mobile?

 

https://gyggle.nl

Accepted Solution (1)

AnneLuo
Shopify Partner
187 41 47

This is an accepted solution.

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Customize.

Step 2: Find the section on the homepage, click the Slideshow

AnneLuo_1-1709635460363.png

step3: Add the following code to the custom CSS box.

 

 

@media screen and (max-width: 749px) {
  .banner__media {
    height: 100% !important;
  }
  .media img {
    position: relative !important;
    object-fit: contain;
  }
}

 

 

AnneLuo_2-1709635641771.png

The image will be displayed normally on the mobile end.

AnneLuo_0-1709636932761.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on luomingxia@shinetechsoftware.com.

View solution in original post

Replies 5 (5)

zamanusam
Visitor
2 0 0

can i try this theme on my store?

AnneLuo
Shopify Partner
187 41 47

This is an accepted solution.

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Customize.

Step 2: Find the section on the homepage, click the Slideshow

AnneLuo_1-1709635460363.png

step3: Add the following code to the custom CSS box.

 

 

@media screen and (max-width: 749px) {
  .banner__media {
    height: 100% !important;
  }
  .media img {
    position: relative !important;
    object-fit: contain;
  }
}

 

 

AnneLuo_2-1709635641771.png

The image will be displayed normally on the mobile end.

AnneLuo_0-1709636932761.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on luomingxia@shinetechsoftware.com.
gyggle
Tourist
6 0 0

That worked great.  

AnneLuo
Shopify Partner
187 41 47

Okay, great!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on luomingxia@shinetechsoftware.com.
zamanusam
Visitor
2 0 0

thanks for great guide