Debut theme banner image on desktop and mobile

[Clementineandmi]

Hi, I use the debut theme on my website and the image with text overlay on my homepage but I need to have a different size image for the desktop to the mobile version. What size is the optimum size image for mobile? Can I create a different size image for desktop as the banner image always crops in and looks very poor. Can I make the desktop crop taller? 

Thanks so much

Clem 

[suyash1]

@Clementineandmi - I recommend to use 2 sections, 1 for desktop images and other for mobile images and then using css you can show/hide the section depending upon screens size.

If you remove / add section later then this css code needs to be updated.

[Clementineandmi]

Hello thank you so much for your help. How do I create 2 sections? And how do I know what the optimum image size is for both options? 

Do you know what the optimum image size is for the debut theme when using one image for both mobile and desktop 

[suyash1]

@Clementineandmi - you can add banner section from customize settings, for desktop image width is around 1400px and height 400-600px.

for mobile, width is around 600px and height proportionate to what looks good

[Clementineandmi]

Please could you send a step by step guide on how to do this? Sorry I don't quite understand thank you so much for your help 

[suyash1]

@Clementineandmi - have you created 2 images? 1 for desk and one for mobile? if no then please create them

[Clementineandmi]

Hello, Do you mean create the images on shopify? I don't know how to ? 

[suyash1]

No, not on Shopify but banners which you want to add to site