Home / Forums / You Theme Support / Header image – different img desktop to mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts

  • Brandelity
    Participant

    Hello,

    On my website I have a header img for one page that works well for desktop (tried on various screen dimensions) and for landscape tablet display. It doesn’t work for portrait tablet display or for mobiles.

    I really like the img and as we do a lot of B2B we will get mainly desktop views, so was wondering if I could have a different img appear or even no background img for the portrait tablet and mobile displays?

    Ive got a holding page atm so you can’t see without logging in but the page is the brandelity.co.uk/contact page and the img is the phone img at the top.

    Be grateful for any assistance!

    Thanks

    Hi @brandelity

    What you described should be possible. Can you please send over your site’s URL and login credentials so we can personally check and test it?

    Regards,


    Brandelity
    Participant
    This reply has been marked as private.

    Hi @brandelity

    This should be fixed now.

    Just like the other ticket you opened, you just needed to add an Extra Class Name to the row where the header image is.

    After that, you can then use that classname to either hide or replace the image. The CSS I added is to hide the image on mobile.

    .no-mobile-header-image .vc_parallax-inner {
        background-image: none !important;
    }
    
    .vc_row.no-mobile-header-image {
        background-image: none !important;
    }

    Please check if everything looks good from your end.

    Regards,


    Brandelity
    Participant
    This reply has been marked as private.

    Hi @brandelity

    Use this CSS to decrease the height of the header on mobile. Paste it into Theme Options > Custom CSS > Mobile CSS

    #content .vc_custom_1495637367798 {
        padding-bottom: 0px !important;
    }
    
    #content .vc_row-parent.half_row_height {
        min-height: 10px;
        height: 90px;
        padding: 20px 0 !important;
    }

    Regards

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.