[Support request] Header Element mobile view

[David]

Hi there,

I’ve provided a link to my site in the details.

My question: I’ve created a header section element that includes an image with text and buttons. On desktop view it looks nice, on mobile view however the image shows parts of the image that are not ideal.

How I can I change this? Should I create a new header section element specifically for mobile?

Thanks in advance,
David

[Fernando]

Hi David,

You can try this CSS:

@media (max-width: 768px) {
    .page-hero {
        background-position-x: 80%;
    }
}

[David]

Hi Fernando,

thank you, this worked – I’ve deactivated my optimization plugin (as mentioned in another support thread).

One more question though: Can I move down the text and the buttons in mobile view only?

Thanks!

David

[Fernando]

Modify your code into this:

@media (max-width: 768px) {
    .page-hero {
        background-position-x: 80%;
    }

    .inside-page-hero.grid-container.grid-parent {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

Modify the values to your preference.

[David]

Perfect, thank you! Resolved.

[Fernando]

You’re welcome David!

[Author]

Posts