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

Home Forums Support set different image for mobile view using header element tool

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1089253
    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

    #1089344
    David
    Staff
    Customer Support

    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.

    #1089379
    Florian

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

    Thanks for your super fast response!

    #1089455
    David
    Staff
    Customer Support

    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;
        }
    }
    #1089541
    Florian

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

    #1089571
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.