[Resolved] Header width: 2 questions

[Antwan]

Hi Tom,

I can’t get the header images on https://www.akoesticum.org/en/ to scale or position in a good way on mobile. It just shows the top left portion of the image. I’ve looked on the support forums for similar questions, but couldn’t come up with an answer. Is there anything I’ve been missing?

And on the same site, I’m using the pro version of the WP Google Maps plugin. The map shows perfectly in the header on https://www.akoesticum.org/en/contact/, but when you click on “Get directions” the resulting popup also has a width of 100%. Is there any way to restrict this to the width of the actual content?

Thanks in advance!

Antwan

[Leo]

Hi Antwan,

1. Unfortunately that’s just the nature of background images – it has to do with the aspect ratio.

The ratio on a desktop is different than on mobile, but the image still has to fill the area, so certain part of it aren’t shown.

One solution is to create an image just for mobile, then apply it using some CSS:

@media (max-width: 768px) {
.page-id-xx .generate-content-header {
        background-image: url( 'URL TO YOUR MOBILE BACKGROUND IMAGE' );
    }
}

You would need to find the page ID first.

2. Try this CSS:

.wpgmaps_directions_outer_div {
    max-width: 1100px;
    margin: 0px auto;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps.

[Tom]

For the background image, you could try something like this:

.generate-content-header {
    background-position: center center;
}

I might add that into the core plugin as it keeps the image centered on all devices.

[Antwan]

Both fixes worked like a charm. Thanks a bunch, you deserve a medal for your outstanding support. 🙂

[Leo]

Glad we could help! We prefer 5 star reviews if you haven’t left one yet 😉

[Author]

Posts