Solved

Can I use distinct banner images for mobile and desktop on Shopify?

AMOB
Shopify Partner
115 1 36

How can I have different images on banner one for mobile and one for deskstop because my image banner is a lil to wide on desktop.

website : zoticnewyork.com

Screen Shot 2022-05-22 at 12.03.47 AM.png

Accepted Solution (1)
suyash1
Shopify Partner
9081 1130 1479

This is an accepted solution.

@AMOB - please add this css to the very end of your base.css file and check

@media screen and (min-width:750px){
#shopify-section-template--15947213242603__image_banner{    
display: none;    visibility: hidden;}
}

@media screen and (max-width:749px){
#shopify-section-template--15947213242603__1653207576ab6132f2{    
display: none;    visibility: hidden;}
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

Replies 18 (18)

suyash1
Shopify Partner
9081 1130 1479

@AMOB - please add 2 different banners, one fro desktop and one for mobile , then using css we can hide one as per the need to show required one

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AMOB
Shopify Partner
115 1 36

Where in css can I edit?

 

 

suyash1
Shopify Partner
9081 1130 1479

@AMOB - base.css file, you can edit css but before that please add 2 banners

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AMOB
Shopify Partner
115 1 36

OK I did

 

suyash1
Shopify Partner
9081 1130 1479

@AMOB - not able to see second banner, is it on home page and active?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AMOB
Shopify Partner
115 1 36

I changed it now what!

AMOB
Shopify Partner
115 1 36

Now whats the css file I edit?

suyash1
Shopify Partner
9081 1130 1479

@AMOB - which banner do you want on desktop and which on which on mobile?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AMOB
Shopify Partner
115 1 36

I want the one with white shirt on desktop

and the one that shirtless/black on mobile

suyash1
Shopify Partner
9081 1130 1479

This is an accepted solution.

@AMOB - please add this css to the very end of your base.css file and check

@media screen and (min-width:750px){
#shopify-section-template--15947213242603__image_banner{    
display: none;    visibility: hidden;}
}

@media screen and (max-width:749px){
#shopify-section-template--15947213242603__1653207576ab6132f2{    
display: none;    visibility: hidden;}
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AMOB
Shopify Partner
115 1 36

could I always change the photo with out having problems or do I need to add anything to basecss?

suyash1
Shopify Partner
9081 1130 1479

@AMOB - code is for these 2 section, unless you delete these 2 sections to add new ones, changing images should and will work

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AMOB
Shopify Partner
115 1 36

thanks!

AMOB
Shopify Partner
115 1 36

thank you!

suyash1
Shopify Partner
9081 1130 1479

@AMOB - did you edit base.css file? looks like css stopped loading, 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
AMOB
Shopify Partner
115 1 36

it worked, does it work on your end?

Ben_Neorai_Gate
Explorer
53 1 6
suyash1
Shopify Partner
9081 1130 1479

@Ben_Neorai_Gate - hello, did you add 2 banners on homepage?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI