Collection Banner Image for Mobile and Desktop (separate images)

Highlighted
New Member
5 0 0

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!

0 Likes
Highlighted
Shopify Partner
370 61 88

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

0 Likes
Highlighted
New Member
5 0 0

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!!

0 Likes
Highlighted
Shopify Partner
370 61 88

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

0 Likes
Highlighted

through custom coding you can achieve .

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Highlighted
Tourist
6 0 0

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

LetsKauphy_0-1594721325884.png 

 

Mobile View

LetsKauphy_0-1594721626084.png

 

0 Likes
Highlighted

share your store url?

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Highlighted
Highlighted

just add this 

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

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Highlighted
Tourist
6 0 0

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. 

0 Likes