Solved

Can I resize images on mobile for a Dawn 2.0 theme Shopify store?

Ryanxanthopoulo
Excursionist
37 0 4

Hi.

 

I have an image on my homepage which is displaying larger than the screen size (as pictured). It fits perfectly in desktop so only want to change the size on mobile. How can I do this please?

Ryanxanthopoulo_0-1677120727455.png

 


using dawn 2.0 theme. Site URL https://93d862.myshopify.com password stecew

 

Thanks in advance 

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

You can try using another code

 

 

 

@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    display:none !important
}
.banner__media.media img,.banner__media.media{
position:static !important
}

}

 

 

 

 

View solution in original post

Replies 6 (6)

PageFly-Victor
Shopify Partner
7865 1785 3050

 

Hi @Ryanxanthopoulo,

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file section-image-banner.css

Step 3: Paste the below code at bottom of the file -> Save

@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 19.5rem !important;
}
.banner__media.media img{
object-fit: contain !important;
}
}

 

PageFlyVictor_0-1677122602576.png

 

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

Ryanxanthopoulo
Excursionist
37 0 4

Hi. This has worked, however now I can see this 

Ryanxanthopoulo_0-1677125129935.png

 

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

You can try using another code

 

 

 

@media screen and (max-width: 749px){
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    display:none !important
}
.banner__media.media img,.banner__media.media{
position:static !important
}

}

 

 

 

 

Ryanxanthopoulo
Excursionist
37 0 4

Thankyou this has fixed this!

PageFly-Victor
Shopify Partner
7865 1785 3050

You are welcome. I'm glad when I can help you 😍

GemPages
Shopify Partner
5588 1261 1203

Hello @Ryanxanthopoulo ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1677122699275.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1677122714771.png

    <style>
      @media (max-width: 767px ) {
        #shopify-section-template--17919053922597__image_banner .banner__media {
            position: relative;
        }
        #shopify-section-template--17919053922597__image_banner .media>img {
            object-fit: unset;
            position: relative;
        }

      }
    </style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center