Home Forums Trusted Header banner on secondary pages in mobile and tablet view

This topic contains 6 replies, has 2 voices, and was last updated by  Andy 1 month, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2925

    Aza
    Participant

    Hi,

    Here’s my site (still under construction) : http://locked-in.fr

    I’ve noticed that the header banner size on the main page is 1920*640 but the height is smaller on secondary pages.

    So I’ve created a banner in order the company logo is quite centered both the main page and all secondary pages such as this one http://locked-in.fr/index.php/le-jeu/

     

    From a mobile or tablet, the main page logo is well centered but in the secondary pages it is too high

    Open this link using a mobile/tablet view: http://locked-in.fr/index.php/le-jeu/

    Can you help?

    Thank you 🙂

    • This topic was modified 1 month, 3 weeks ago by  Aza.
    • This topic was modified 1 month, 3 weeks ago by  Aza.
    • This topic was modified 1 month, 3 weeks ago by  Aza.
    • This topic was modified 1 month, 3 weeks ago by  Aza.
    #2929

    Andy
    Keymaster

    Hi

    If you want to display a different image on mobile/tablet screens, use this CSS (replace path-to-image-url with your actual image path/url

    for tablet and mobile:

    @media screen and (max-width: 1024px){
        .main-header{
            background-image:url('path-to-image-url') !important;
        }
    }

    for mobile only:

    @media screen and (max-width: 768px){
        .main-header{
            background-image:url('path-to-image-url') !important;
        }
    }
    #2931

    Aza
    Participant

    Thank you for your very prompt answer, I’ll try this 🙂

    By the way, is there a way to have the same banner height on every pages?

    #2933

    Andy
    Keymaster

    It makes use of javascript to dynamically change the height to take account of the featured service boxes and also on all pages to take into account that the menu or top bar height could be different on different sites depending on setup.

    The javascript which controls this is in the ‘trusted-custom.js’ file. You could copy this file to a child theme and amend it accordingly to suit your own needs.

    #2934

    Aza
    Participant

    Ok thank you 🙂

    #2935

    Aza
    Participant

    It seems to also work using the following, at least for banners above 450px

    🙂

    .main-header{
    height: 450px;
    }

    #2936

    Andy
    Keymaster

    Oh yeah that’ll work. Just be aware giving it a fixed height if you add content to the top bar for example, you may need to account for the extra height.

    Glad you’ve found a solution that works 🙂

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

You must be logged in to reply to this topic.