Collection Banner Image for Mobile and Desktop (separate images)

[JerryATL]

Hi, I'm trying to make the banner of a collection fit both mobile and desktop. Is there any way to have a different image for mobile vs. desktop?

I've been searching all through the forums and have found some code that does it for a theme homepage banner, but I don't know how to do it for a collection.

I have the Retina theme and they have a banner.collection template that looks good on mobile, but it is way to big and tall on desktop (we want the first row of product to always show regardless of whether you on mobile or desktop).

Can anyone help me understand how to code this functionality into a collection template? Thanks!

[Wahab_Ahmad]

Hello @JerryATL,

Yes It is possible, you can upload these two images in shopify files (copy cdn of that images). then use scss media query to change background image of element.  

If it is useful mark this like and accept solution

[JerryATL]

Sorry, I'm very new to Shopify, so I'm not exactly sure what you mean by "use scss media query to change background image of element"

I know how to upload two files and get their ref links to copy into HTML code, but that;s about it! 

Sorry for dumb questions!! 🙂

[Wahab_Ahmad]

@JerryATL, share store link and cdn of that images. 

[JerryATL]

Store Link: https://www.nicalifeproject.com/collections/choker-necklaces

Desktop banner image desired: https://cdn.shopify.com/s/files/1/0986/6274/files/1800x700_Choker.png?v=1594698018

 

Looks good on desktop (above), but too narrow for mobile (below)

Mobile banner image desired: https://cdn.shopify.com/s/files/1/0986/6274/files/1800x1170_Choker.png?v=1594651836

Looks good on mobile (above), but too tall on desktop (below)...can't see first row of product

Thanks for the help Wahab!

[ashiqueh4]

through custom coding you can achieve .

[LetsKauphy]

Salaam Hussain.

I am using Venture theme. In that I am facing issue in the TEXT COLUMNS WITH IMAGES section. The images I use look totally different in Desktop view and mobile view. In the latter they are getting cut and only the bottom part is visible. Please suggest how this can be resolved.

Thanks in advance.

Desktop view

 

Mobile View

[ashiqueh4]

share your store url?

[LetsKauphy]

https://256746y9eaoqv0jx-35877486636.shopifypreview.com

[ashiqueh4]

just add this 

.column-flex__image.lazyloaded {
min-height: 550px;
}

[LetsKauphy]

Thanks for the suggestion.

Sorry if the next question is dumb - I am a Zero Knowledge guy in tech. Where should I add ? Can you please guide step by step. 

[ashiqueh4]

in theme.css put the code at bottom 

[Propero]

@LetsKauphy ,

Please go to  Admin - > Online Store -> Themes -> Action -> Edit Code and then look for Folder assets, inside assets folder you would find theme.scss.liquid file open it and paste the code at the bottom of the file . Hope this helps.

[LetsKauphy]

Thank You Panwar for the step-by-step guidance. It made things easier and the solution provided by Hussain worked. 

[Vikas55]

Where is code ?

can you provide the code so that i can apply to my store also

[LetsKauphy]

just add this 

.column-flex__image.lazyloaded {
min-height: 550px;
}

[LetsKauphy]

Please go to  Admin - > Online Store -> Themes -> Action -> Edit Code and then look for Folder assets, inside assets folder you would find theme.scss.liquid file open it and paste the code at the bottom of the file . Hope this helps.

Hello Vikas,

The above two solutions / suggestions are the ones I received from the experts on this community and it really worked for me. Hope this works for you too.

[LetsKauphy]

Thank You Hussain for the suggestion. It worked and the view on both desktop and mobile are same. Problem rectified. Thanks again for the support.