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

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 6 years, 7 months ago by Aza.
    • This topic was modified 6 years, 7 months ago by Aza.
    • This topic was modified 6 years, 7 months ago by Aza.
    • This topic was modified 6 years, 7 months 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)
  • The topic ‘Header banner on secondary pages in mobile and tablet view’ is closed to new replies.