Collection Banner Image for Mobile and Desktop (separate images)

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

Replies 17 (17)
Wahab_Ahmad
Shopify Partner
722 112 178

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

Wahab_Ahmad
Shopify Partner
722 112 178

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

ashiqueh4
Shopify Partner
358 34 56

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

LetsKauphy
Tourist
9 0 1

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

 

ashiqueh4
Shopify Partner
358 34 56

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

ashiqueh4
Shopify Partner
358 34 56

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

LetsKauphy
Tourist
9 0 1

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.