Use different image on mobile than desktop

Hello!

I'm hoping someone can help me with the code/ process for displaying a different image on the mobile site than on the desktop version. I'm not looking to resize it.  So basically, I believe I want to hide the original image when it's in mobile view and display a new image and vice versa.  Specifically, my homepage is coming out ugly / mismatched sizes due to the image blocks.  Any help on this would be greatly appreciated!

www.licensefortress.com

Hey Hollie, the easiest way to do this is to upload both the mobile and the desktop images, then hide the incorrect one as needed with custom CSS. Or you could even set up a whole section for desktop and another section for mobile, and hide each section as needed.

On 1/7/2020 at 7:40 PM, Vigasan said:

Hey Hollie, the easiest way to do this is to upload both the mobile and the desktop images, then hide the incorrect one as needed with custom CSS. Or you could even set up a whole section for desktop and another section for mobile, and hide each section as needed.

Hello, do you have more detailed information on how to achieve this? I've seen this solution mentioned a few times across the forum. Is there somewhere I can read more about this strategy? Thanks.

On 1/22/2020 at 3:08 AM, GMDI said:

Hello, do you have more detailed information on how to achieve this? I've seen this solution mentioned a few times across the forum. Is there somewhere I can read more about this strategy? Thanks.

You need to know CSS to do this. If you create 2 images, then share link, we can take a look

On 1/23/2020 at 2:44 AM, tuanphan said:

You need to know CSS to do this. If you create 2 images, then share link, we can take a look

Hi Tuan, thanks for your help. You'll recognize the site, you helped me increase the site width using CSS.

The site is igcalgary.com and I'd like to work on the first index section #services. I have attached two banner samples.

What I would like to do is have a duplicate of each index section with an alternate banner image and hide the section depending on the screen size. I found this idea in the linked forum post. @Joeyearthly suggests creating different index sections and hiding them but I haven't been able to get that to work.

Hi @tuanphan

Can you help me with my website?

andinc.es Password: sweetfebrero

In the homepage, under the section "Como Funciona" I want the horizontal image to stay in desktop version and the squared image to show on mobile version.

thanks!

5 hours ago, AndiDopico said:

Hi @tuanphan

Can you help me with my website?

andinc.es Password: sweetfebrero

 

In the homepage, under the section "Como Funciona" I want the horizontal image to stay in desktop version and the squared image to show on mobile version.

 

thanks!

/* hide square image on desktop */
div#block-yui_3_17_2_1_1580242822454_16569 {
    display: none;
}
/* show squares image on mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1580242822454_16569 {
    display: block;
}
}

Hi @tuanphan - as I see you the one having all the knowledge! Could you help me with my website as well please...?

I would like to have two different Graphics and a different text on the graphics on the Homepages (desktop on mobile) - which CSS Coding I'll need for that?

Should I give you the webpage or send you screenshots?

Best 

Tobias 

On 1/28/2023 at 9:33 PM, Mr_Ikaurs said:

Hi @tuanphan - as I see you the one having all the knowledge! Could you help me with my website as well please...?

 

I would like to have two different Graphics and a different text on the graphics on the Homepages (desktop on mobile) - which CSS Coding I'll need for that?

 

Should I give you the webpage or send you screenshots?

 

Best 

 

Tobias 

Hi,

Can you share link to homepage? We can help easier