Different main banner size for mobile vs desktop

Solved
fitandfeminin
Tourist
6 0 2

Hey! 

Actually Im pretty lost at the moment... Maybe you can help me.

I need to change the image size of the main picture to extra large on desktop and to small on smartphone. 

Is something like this even possible? 

 

Best regards

 

Accepted Solution (1)

Accepted Solutions
Brie
Shopify Staff
568 48 103

This is an accepted solution.

Hi, @fitandfeminin

 

What theme are you using? Depending on your theme and paid plan, our themes team may be able to assist you with that change (see our Design Policy). To look into that further for you, I will just need to verify the account. If you would like me to get that process started, please reply here and let me know.

 

Thank you! 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 10 (10)
Brie
Shopify Staff
568 48 103

This is an accepted solution.

Hi, @fitandfeminin

 

What theme are you using? Depending on your theme and paid plan, our themes team may be able to assist you with that change (see our Design Policy). To look into that further for you, I will just need to verify the account. If you would like me to get that process started, please reply here and let me know.

 

Thank you! 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

fitandfeminin
Tourist
6 0 2

Im using the debut theme. This would be great!

Brie
Shopify Staff
568 48 103

Hi, @fitandfeminin

 

Okay, great. I've just sent you an email, so if you'd like to respond there then I can look into that for you. Thank you! 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

sai2810
New Member
5 0 0

Hey im using Narrative theme and while im trying to add the main banner to the site its not fitting to mobile properly ,so i just want to use different banners for desktop and mobile.can someone help?

 

Brie
Shopify Staff
568 48 103

Hi, @sai2810

 

A Banner section isn't built into the Narrative theme, so you may be referring to the Slideshow section. If so, it wouldn't be possible to for us to implement different slideshow images on mobile and desktop as it would require quite a bit of custom coding. Your best option here would be to find an image that suits both device types. Here are some additional tips to help with that:

 

- Use images that are 4000 x 2200 px or larger. 

- Read up on best practices for uploading slideshow images here. We also have a video here that goes over this.

- Refrain from uploading images with text on them (text options are instead added in the Theme Editor). 

- Set the slide heights to "Adapt to first image", which allows for a more flexible container. 

 

The site is designed for the image container to respond and change depending on the type of screen it's loaded on. For more information on troubleshooting slideshow image cropping, you can take a look at this blog post

 

Hope that helps!  

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

dor-collections
New Member
1 0 0

Hi!

So I'm using the theme, "Minimal" and I am having issues with my banner fitting the mobile v. desktop. I am currently using Slideshow for the banner and it is 2500 x 1000 px. I also tried 3420 x 3420 and it was the same result. Can you help me figure out how to fix this issue? My banner is cut off on both sides when switched to Mobile format. 

Thanks

Brie
Shopify Staff
568 48 103

Hi, @dor-collections!

The recommended size for slideshow images for the Minimal theme is 1280 x 460 px. Give that a try and let me know how it goes. Cheers!

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Lingeriebyatg
New Member
1 0 0

Hi There 

 

I am using Brooklyn theme and I’m also having trouble with the above. 

My Slide shows, show differently on Computer to mobile. Is there a way to fix this or a proper dimension I should be using? 

Brie
Shopify Staff
568 48 103

Hey, @Lingeriebyatg!

The recommended dimensions for slideshow images on the Brooklyn theme would be 3840 x 2160 px or larger (without exceeding the upload limits). That said, it's expected for your images to look different from the computer to mobile view, as they need to adapt to fit different screen sizes. If you aren't able to find an image that adapts for both versions in a way that suits you, you can choose to have a different image added for one view or the other (requires custom coding). If you still have Design Time left, that's something our Themes team can give you a hand with. 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog