Brooklyn Theme: Different image for desktop and mobile

Highlighted
Tourist
9 0 1

I want to show different images for desktop and mobile view on my website. I created a separate image picker for mobile by changing the code in the schema tags, and input the below code into the css to hide/show the images based on screen size. However, I cannot seem to get the images to actually show up. Is there anything I am missing?

<style>
@media only screen and (min-width: 768px) {
.hidden_mobile{display:none;}
}

@media only screen and (max-width: 767px) {
.hidden_desktop{display:none;}
}
</style>

0 Likes
Highlighted

Hi @davispa2002 

put a display:block in either option for the opposite

 

<style>
@media only screen and (min-width: 768px) {
.hidden_mobile{display:none;}
.hidden_desktop{display:block;}
}

@media only screen and (max-width: 767px) {
.hidden_desktop{display:none;}
.hidden_mobile{display:block;}
}
</style>

 

Depending on what you are doing, it might not show, but if a section you created without any inhibitors the top should work

 

 

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Tourist
9 0 1

@Defineify Thanks for the response!

What would the next step be? After I placed that code in the css, it showed both images on the mobile view and the desktop image on the desktop view.

This is the slideshow.liquid area responsible for showing the images. I believe a change needs to be made here, but I am not sure exactly what it is.This is the slideshow.liquid area responsible for showing the images. I believe a change needs to be made here, but I am not sure exactly what it is.This is the code in between the schema tags where I created a second image picker for mobile.This is the code in between the schema tags where I created a second image picker for mobile.

0 Likes
Highlighted
New Member
1 0 0

Thank you for the answer. I am now working on with he Brooklyn theme.I also would like to add this code in order to displays different images depending on whether it displays on mobile or desktop. Where should I add this part of the code that specifies this?  Thank you very much. 

0 Likes