[Resolved] set different image for mobile view using header element tool

[Florian]

Dear Support,

I am using the elements tool to set a hero header for my webpage. A nice working feature. Everything well so far. Now I want to set a different image for the mobile view as my chosen background image ( set trough custom image ) is not looking like I want it to be on mobile devices. How to show a different image just for mobile view?

Thanks for the help and keep up the good work 🙂

best regards,
Florian

[David]

Hi there,

are you looking to use a completely different image or just re-size/position it?
If its the latter then you can adjust the % top and bottom padding of the header element just for mobile to correct its size. Let me know.

[Florian]

Dear David, indeed do I want to use a completely different image.

Thanks for your super fast response!

[David]

Ok, currently the only way to do that is with CSS. And would mean a separate header element for each post or page. If thats ok then follow these steps:

1. Edit the Header Element – in the Element Classes field add mobile-hero-image
2. Add this CSS updating the URL to the image you want to use:

@media (max-width: 768px) {
    .mobile-hero-image {
        background-image: url('full_url_to_the_mobile_image') !important;
    }
}

[Florian]

perfect, thats exactly what I needed.
Thank you very much!

[David]

You’re welcome

[Author]

Posts