Archived topic

Header Element on Mobile

3 replies · Started by Hendra on May 31, 2020

Viewing posts 1–4 of 4

May 31, 2020 at 12:38 am #1308358

Hi there,

I created a header element using a background image. It looks fine on desktop, but not on mobile. I have played around with the top and bottom padding for mobile, but the image is still a bit too much to the left. I want the image to be a bit to the right so the mom is fully visible.

I found a forum topic about using a different image for mobile: https://generatepress.com/forums/topic/set-different-image-for-mobile-view-using-header-element-tool/

But is there any other way to do this other than using a different image?

Please ignore the same image below the header. I am still testing. That image is inside a GB container block.

Thank you.
Hendra

May 31, 2020 at 6:20 am #1308564

Hi there,

try adding this CSS:

@media (max-width: 768px) {
    .page-hero.mobile-background-30 {
        background-position: 30% top;
    }
}

Then edit your Header Element and in the Element Classes field add: mobile-background-30

May 31, 2020 at 8:48 am #1308841

Hi David,

It works! Exactly what I need.

Thank you so much for the quick response.

Hendra

June 1, 2020 at 1:02 am #1309455

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.