Customization for mobile and desktop image

[carlosct]

Hello,

I am trying to follow these instructions for my Debut template, but for any reason I think that the versions described in this previous link has changed from what I have:

https://community.shopify.com/c/Shopify-Design/optimise-the-customized-image-for-mobile/m-p/766919/h...

Also, links and images from this previous link are not working, so if anyone can help me on making work a specific image for desktop version and another image for mobile version.

I will try to describe what I did:

1. Image picker, this step I was able to add it in hero.liquid:

{
      "type": "image_picker",
      "id": "mobile_image",
      "label": "Mobile Image"
}

2. Then the previous link mentions that it is needed to edit theme.scss.liquid, but this file is no available on my coding section, I do not know if it has changed on this version.

.mobile-only{ display: none}
.desktop-only{ display: block}

@media (max-width:768px){
  .mobile-only{ display: block}
  .desktop-only{ display: none}
}

3. Add div class for mobile and desktop version in hero.liquid before <noscript> section, I tried to add these sections, but I think that probably are incomplete.

@KetanKumar could you be very kind to help me on this?

Regards,

[carlosct]

I forgot to mention website where I want to modify the desktop/mobile image.

www.kofekoffee.com

Regards,

[KetanKumar]

@carlosct 

sorry for late reply yes i can do this customization code if you need this can you please send pm details