Archived topic
set different image for mobile view using header element tool
5 replies · Started by Florian on December 2, 2019
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
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.
Dear David, indeed do I want to use a completely different image.
Thanks for your super fast response!
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;
}
}perfect, thats exactly what I needed.
Thank you very much!
You're welcome
