Different header image on mobile

Hello,
I am using a diagram on a page and it looks great on desktop, but not on mobile. I’m trying to swap the diagram with different image when the site is viewed on mobile devices. What’s the best way to accomplish this? Can you please assist?

Thanks.

Please share the page URL in question, so I can have a look.

Regards,
Kharis

Thank you for sharing the link over email. Please try to add the below custom CSS code to define a fixed width on the image container and allow horizontal scrolling on smaller screen width.


@media only screen and (max-width:767px) {
  
  .elementor-col-100 {
    overflow-x: scroll;
  }
  
  .elementor-col-100 .elementor-column-wrap {
    min-width: 767px;
  }
  
}

Let me know how it works for you.

Regards,
Kharis

Thanks for a quick response.

We have a different diagram made for the phone with larger fonts. Can you show me how to swap the current diagram with a different one in mobile (phone only)?

Thanks.

As I don’t have a site test with Elementor page builder module you are using, please try to create one more image block (for mobile) with Elementor and put it right after your current diagram. Let me know once you’re done, so I can provide you with a couple of CSS code to hide the larger image on mobile to swap it with the mobile version image.

Regards,
Kharis

I just added a placeholder image. Please let me know if you need anything else.

Thanks soooooo much.

Try this code:


.elementor-element-505qqhf {
  display: none;  
}

@media only screen and (max-width:767px) {
  
  .elementor-element-ozfin11 {
    display: none;
  }

  .elementor-element-505qqhf {
    display: block;
  }
  
}

Each Elementor row has its own unique class name. Your first image block class name is .elementor-element-ozfin11 and your second one is .elementor-element-505qqhf

The code above hide your second image row by default. In the 767px screen width and below, your second image will be displayed and the first one will be hidden.

Regards,
Kharis