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

Hello @tuanphan this seems like an older thread, but I'm interested in this solution as well. We have banner images on our website (seasailing.org) that are great on desktop, not so great on mobile. Maybe there's a more straightforward way to do this, but if not, we can come up with different mobile banners if we can swap them out using CSS.

On 2/24/2024 at 1:38 PM, KifS said:

Hello @tuanphan this seems like an older thread, but I'm interested in this solution as well. We have banner images on our website (seasailing.org) that are great on desktop, not so great on mobile. Maybe there's a more straightforward way to do this, but if not, we can come up with different mobile banners if we can swap them out using CSS.

You mean resize this image?

Not the home page, but most other pages. For example, see the join-us pages. 

I found some css that has worked in many cases, but not always (such as that page)

 

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

#join-us {
  min-height:initial !important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color:#B25A27; //change as needed
  -webkit-box-orient:vertical;

On 3/1/2024 at 7:34 AM, KifS said:

I found some css that has worked in many cases, but not always (such as that page)

 

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

#join-us {
  min-height:initial !important;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  background-color:#B25A27; //change as needed
  -webkit-box-orient:vertical;

Add this code to Page Header Code Injection (page where you have problems, you can adjust number in the code)

If your Plan is Personal and doesn't support Code Injection, you can edit page > Add a Code Block > paste this code

<style>
  @media screen and (max-width:767px) {
  article section:first-child {
    min-height: unset !important;
    height: 25vh;
    margin-top: 5vh;
}
  }
</style>

@tuanphan Amazing. Thank you!