Alter mobile main image without changing desktop version?

Store Design
1

Hello,

I was wondering if anyone knows how to change the main image in the mobile version (so that it is better optimized and looks better) without affecting the look of the desktop version?
I know there is only so much you can do with the already pre-existing main image, but then I would ask, is there a way to have the mobile main image act independently of the desktop main image?

I am currently working with the Fresh - Theme
I also had a third-party edit some of the theme code, if that makes a difference.

The site link is: https://www.cryptee.co/

Thanks for any help in advance!

1 Like
2

@Retro

sorry for any issue can you please try this way

https://www.mojoin.com/show-shopify-banner-image/

1 Like
3

Thank you very much for that thread. I am running into an issue though. I have followed all of the steps (twice) and I still get the desktop and mobile banner showing up in each others view, rather than only seeing one. Do you know how to fix this? I saw the thread was for the Debut theme, but I am using the Fresh theme if that makes a difference.

4

@Retro

yes you have use above code it work all theme

1 Like
5

I know, like I said I have done the tutorial you suggested, twice.

Still, the desktop banner shows in mobile.
Still, the mobile banner shows in desktop.

6

Here is the preview if that helps: https://cpqn9owa0vuvf2u8-59001569445.shopifypreview.com

1 Like
7

@Retro

yes, please add this code

8

I’m sorry, this isn’t helpful.

I already USED the code you provided.

1 Like
9

@Retro

sorry but your save missing css code

1 Like
10

Hello,

I have saved the theme.css file, it still shows the banner on mobile and desktop. Any other suggestions?

Retro_0-1630479069427.png
Retro_0-1630479069427.png1394×808 43.1 KB

11

@Retro

yes but bt something is missing that code not fully

please try this code

@media only screen and (max-width: 749px) {
   .yx-mobile-hidden{
      display:none;
    }
   .yx-desktop-hidden{
      display:block;
    }
}

@media only screen and (min-width: 750px) {
   .yx-mobile-hidden{
      display:block;
   }
   .yx-desktop-hidden{
      display:none;
    }
}