Solved

Auto adjust photo on banner for mobile

blushme
New Member
7 0 0

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

 

How do I make them look like one on the desktop view?View.jpg2020-01-13 (2).png 

Thank you  

Accepted Solution (1)

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

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

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 21 (21)

Qualitycheck
Shopify Expert
1449 114 233

Hi @blushme 

 

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

Happydogs
Tourist
5 0 1

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.pngScreen Shot 2020-09-29 at 1.06.13 PM.png Mobile mode.

Robin93
Visitor
1 0 0

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?

Happydogs
Tourist
5 0 1
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!
Shopdrifters
Visitor
2 0 0

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.

nika3
Visitor
1 0 0

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/

 

 

clubonlyhumans
New Member
11 0 0

how do you make a separate meeting for the mobile and desktop? I am having the same issue.

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

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

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
blushme
New Member
7 0 0

Thank you so much.. 😉

thebod
Tourist
5 0 0

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? 

oscprofessional
Shopify Partner
15830 2369 3072

Hello @thebod,

Can youplease share your site url

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
thebod
Tourist
5 0 0

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

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

santi123456
Visitor
1 0 0

YOU ARE THE GOAT!

TroWul
Excursionist
28 0 4

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

MarcielGomes
Visitor
1 0 0

Hi TroWul. 

 

Use the app COLLECTION SLIDE SHOW - https://apps.shopify.com/collection-slideshow?surface_detail=collection+slideshow&surface_inter_posi...

 

1.PNG2.PNG3.PNG

4.PNG

 

Mine solved it like this!

https://www.botswana.com.br

Hope this helps!

 

 

fjivanjee94
Visitor
2 0 0

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.

jessiec
Visitor
1 0 0

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!

Haneen
New Member
5 0 0

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?

saoirsestore20
Visitor
1 0 0

It worked Tku

Shopdrifters
Visitor
2 0 0

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?

clubonlyhumans
New Member
11 0 0

I do not have the section theme.scss.liquid to add this code. Is there another way?