Header banner on secondary pages in mobile and tablet view

[Aza]

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 7 years, 11 months ago by Aza.
• This topic was modified 7 years, 11 months ago by Aza.
• This topic was modified 7 years, 11 months ago by Aza.
• This topic was modified 7 years, 11 months ago by Aza.

[Andy]

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;
    }
}

[Aza]

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?

[Andy]

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.

[Aza]

Ok thank you 🙂

[Aza]

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

🙂

.main-header{
height: 450px;
}

[Andy]

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 🙂

[Author]

Posts