How to auto adjust banner images for mobile view?

Store Design
1

Image on the banner is not automatically adjusted for mobile view..

How do I make them look like one on the desktop view?

View.jpg
View.jpg1080×2212 185 KB

2020-01-13 (2).png
2020-01-13 (2).png1910×959 283 KB

Thank you

2

Hi @blushme

This can be achieved by making a separate setting for mobile and desktop ! For better assistance PM me.

3

Hello @blushme ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss.liquid->paste bellow code in bottom of file
@media only screen and (max-width: 980px) {
 #shopify-section-slideshow .hero {
  height:auto;
 }
}
1 Like
4

Thank you so much.. :wink:

5

Hi I am having the same issue and my banner is viewing as very zoomed in on the mobile version. I tried to use this code but it is still not displaying properly.

The theme I am using is Debut.

Is there a new code to use?

6

Hello @thebod ,

Can youplease share your site url

7

Thank you! The site is https://the-bod.com/

It is happening with the banner at the top and also at the bottom.

8

YOU ARE THE GOAT!

9

Im having the same problem but for Desktop version.. Any advice?

10

Hi TroWul.

Use the app COLLECTION SLIDE SHOW - https://apps.shopify.com/collection-slideshow?surface_detail=collection+slideshow&surface_inter_position=1&surface_intra_position=4&surface_type=search

1.PNG
1.PNG1354×623 13.6 KB

2.PNG
2.PNG1319×626 48.2 KB

3.PNG
3.PNG1331×638 451 KB

4.PNG
4.PNG973×532 7.99 KB

Mine solved it like this!

https://www.botswana.com.br

Hope this helps!

11

Hi all,

I am facing a similar issue, but with my email format. When I include pictures in the email, it keeps the email from auto-adjusting for mobile. Any recommendations on how to work through this issue would be appreciated!

This is how it currently looks.
This is how it currently looks.543×899 199 KB

12

Hey,

I am having the same problem as well, however the code you provided where you have to insert asset>theme.scss, I don’t have that file name instead its theme.js. What should I do?

Thanks!

13

Hi,

I pasted this code but it still doesn’t work for me. The image on the mobile version is zoomed in and not in full size. Any idea how to solve it?

14

Hi Qualitycheck! I am also having the issue where my ‘Image with text’ banners are being cut off in mobile mode. Im using the Debut theme. I tried pasting the code that was mentioned for Blushme with no luck. Any chance you can help?

Screen Shot 2020-09-29 at 1.06.25 PM.png
Screen Shot 2020-09-29 at 1.06.25 PM.png1124×542 277 KB

Screen Shot 2020-09-29 at 1.06.13 PM.png
Screen Shot 2020-09-29 at 1.06.13 PM.png360×580 73.5 KB

Mobile mode.

15

It worked Tku

16

Hi, I am also having the issue where my ‘Image with text’ banners are being cut off in mobile mode. Im using the Debut theme. I tried pasting the code that was mentioned for Blushme with no luck. Any chance you can help?

17

Hey, I found selecting the “Adapt to image height” selection in the banner
settings was the best bet and re-jigged the design to suit as best as
possible. The banner on the mobile display is still much smaller than I had
hoped but restricted to the template.Next time I will know to design for
mobile first. Good luck!

1 Like
18

Hi I am having the same problem with my site can you help me adjust the header to my mobile version? Thank you so much!

https://futureforclimate.myshopify.com/

19

Hi, I am trying to format my banner to be the correct width on my mobile site as it is on my desktop site. I tried the code solution above but it didn’t solve the problem. I am using the Debut theme. Any advice?

20

Selecting Adapt Image Height works!! Under Image Height is where you can select this. I’m using the Debut theme, and my banner is perfect on desktop and mobile.