[Resolved] Header width: 2 questions

Home Forums Support Header width: 2 questions

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #272259
    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

    GeneratePress 1.3.43
    GP Premium 1.2.94
    #272376
    Leo
    Staff
    Customer Support

    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.

    #272449
    Tom
    Lead Developer
    Lead Developer

    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.

    #272486
    Antwan

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

    #272487
    Leo
    Staff
    Customer Support

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.