Different Image for Mobile and Desktop version

Hi, 

I want to use two different images on a website - one for mobile and one for desktop view. 

Page is here: IP Due Diligence (ip-duediligence.de) 

Pictures in question are below "Know the worth" . 

I tried the code I found in a different discussion topic, however was apparently not able to identify the right blocks: 

/* resize about images mobile */

@media screen and (max-width:767px) {

div#block-caaad2e9bd745ab16595 {

    width: 90%;

}

div#block-25664f826350d9cbce90 {

    width: 80%;

}

}

Could you please help?

Thanks in advance! 

@MunichMarketers so if you put both versions on the page, I would suggest just using "display: none;" in combo with a media query to specify which one you want to hide for desktop/mobile. so if I'm understanding your goal correctly, this should work? Start by removing your above CSS first, then replace with this:

@media (min-width:800px) {
	#yui_3_17_2_1_1699461730249_70 {
		display: none;
	}
}
@media (max-width:799px) {
	#yui_3_17_2_1_1699461730249_85 {
		display: none;
	}
}

Hey SaranyaDesigns, 

thats exactly what I want. However, I input the code and it doesn't seem to be working. Still shows both pictures. Would you be so kind to check again? 

Thanks in advance!

4 hours ago, MunichMarketers said:

Hey SaranyaDesigns, 

thats exactly what I want. However, I input the code and it doesn't seem to be working. Still shows both pictures. Would you be so kind to check again? 

Thanks in advance!

I can see, you have made an error in your Custom CSS panel. Can you share all the code that you have put on the Custom CSS panel? Then we can dix the error.

This is the code I have in, except for the Cookiebot cbid which I redacted: 

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="redactedXXXXX" data-blockingmode="auto" type="text/javascript"></script>

/* resize about images mobile */
@media (min-width:800px) {
    #yui_3_17_2_1_1699461730249_70 {
        display: none;
    }
}
@media (max-width:799px) {
    #yui_3_17_2_1_1699461730249_85 {
        display: none;
    }
}

35 minutes ago, MunichMarketers said:

This is the code I have in, except for the Cookiebot cbid which I redacted: 

 

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="redactedXXXXX" data-blockingmode="auto" type="text/javascript"></script>

/* resize about images mobile */
@media (min-width:800px) {
    #yui_3_17_2_1_1699461730249_70 {
        display: none;
    }
}
@media (max-width:799px) {
    #yui_3_17_2_1_1699461730249_85 {
        display: none;
    }
}

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="redactedXXXXX" data-blockingmode="auto" type="text/javascript"></script>
You should remove this code from there. And add this code on the Code Injection Section. See images below

Thanks for the reply! 

I had already also added the code there. Removed the code from Custom CSS, so that now its only: 

/* resize about images mobile */
@media (min-width:800px) {
    #yui_3_17_2_1_1699461730249_70 {
        display: none;
    }
}
@media (max-width:799px) {
    #yui_3_17_2_1_1699461730249_85 {
        display: none;
    }
}

Still not working.. Am I missing something? 

15 minutes ago, MunichMarketers said:

Thanks for the reply! 

I had already also added the code there. Removed the code from Custom CSS, so that now its only: 

/* resize about images mobile */
@media (min-width:800px) {
    #yui_3_17_2_1_1699461730249_70 {
        display: none;
    }
}
@media (max-width:799px) {
    #yui_3_17_2_1_1699461730249_85 {
        display: none;
    }
}

 

Still not working.. Am I missing something? 

Replace the code with the code below.

@media (min-width: 800px) {
    .fe-block-yui_3_17_2_1_1699456019602_14570 {
        display:none !important;
    }
}

@media (max-width: 799px) {
    .fe-block-yui_3_17_2_1_1699456019602_11636 {
        display:none !important;
    }
}

Hallo, i'm Alessandro, www.purepencil.com

I've seen that MunichMarketers successfully achieved his goal to have two different images for mobile and desktop. 

In my desktop I have a large background PNG image in the first section. I want to try two different approach for mobile: 

• Resize this image

• A different image, smaller. In this second case, where can I load the second image which can be "selected" by CSS code? In the Image Library? 

Many thanks to your attention

3 hours ago, PurePencil said:

In this second case, where can I load the second image which can be "selected" by CSS code? In the Image Library? 

Hi, if you want to achieve the above and follow this method, you need to add both images you want for desktop and mobile in the page. e.g. 2 image blocks. Then the code above hides one of them depending when you're on desktop or mobile view.

Add first, and let me know. Can then help you modify the code above to work for your website.

Thanks for your fast reply, I've created an image block, image is called Home Mobile.png. 

But the original image, the one I want to use for desktops, are in the background of a section. 

Should I use instead two image block for this method? 

Many thanks 

The reason I use the image in the background of a section is that a portion is hide on medium desktop display, but could spread in wider "cinema" display. On the other way image blocks are all always visible inside a section.