How to Have Different Images for Mobile and Desktop Homepage Slideshow

Guy_Beardsley
Tourist
9 0 2

On Google Chrome if you go to View > Developer > Inspect Elements you can look at your page and the code side by side. Hover over the area on your website that you want to inspect and you will see its section ID in the code.

0 Likes
AMREDABM
Tourist
3 0 0

@cgb-babees wrote:

I figured it out! If anyone's wondering I ended up using the code below, I am using the Minimal theme. I copied the code to theme.css.liquid under Assets.

 

#shopify-section-1587602164374 { display: none; }
@media (max-width: 768px){
#shopify-section-slider {
display: none !important;
}
#shopify-section-1587602164374 { display: block; }

}



Does the code for the custom section work with Minimal?

 

I am trying to figure out how to display different pictures on Mobile for the Minimal theme for the hero slider, not completely hide it.

0 Likes
FX2000
Tourist
9 0 3

Hi, I need to insert a different image only on my mobile version in turbo theme slideshow, can you help me? 

This is my website, you can see that in the mobile version the slideshow is small and you cant see what it says!

sprintmama.com 

I tried to use various tips in the community, but since i dont have the asset theme.scsss.liquid I dont know where to put my new code or the pieces the online tips given to me.

Can you help me please?

0 Likes