[Resolved] Mobile Header Container GB

[Kevin]

Hi, i`m working on a mobile header. Actually the Page has a 50% Text and 50% nothing Container with Background Image. Now i would love to get a special mobile Background image which is on the first position and after that the text part from the 50% container, so the Text is not on the face from the girl.

Any ideas how i get this?

This css is actually active, so i get the mobile background

@media (max-width: 768px) {
    .gb-container.no-mobile-background {
        background-image: url(https://iris.techgarage.media/wp-content/uploads/2020/07/gabby-about-mobile.jpg);
    }
}

Now i fight with the positions.

Thx
Kevin

[Tom]

Hi there,

You can move the background image around using background-position:

@media (max-width: 768px) {
    .gb-container.no-mobile-background {
        background-image: url(https://iris.techgarage.media/wp-content/uploads/2020/07/gabby-about-mobile.jpg);
        background-position: 50% auto;
    }
}

Let me know if that helps or not 🙂

[Kevin]

Thank you Tom.

Actually it looks same like before. Is there any Order i have to fix with the Container?

This is inside the Editor https://www.evernote.com/l/AgwgHJDKD9hFs7tfabMcQEoufugF8ceox8Q
And this is how it looks mobile https://www.evernote.com/l/Agzsj7j1Rr5F9KZWmyCZSWXj08m-jDfnpW4

[David]

Hi there,

if you were to give the empty column some height on mobile ( by adding Padding ) it should create a safe zone over the image, and push the text below it.

[Kevin]

hmm doesn’t work for me. Actually i just want to have a mobile page like this 😉 https://gabbybernstein.com/meet-gabby/

[Tom]

So are you just wanting to push the text down further on mobile then?

[Kevin]

Yes i want mobile a “special mobile image” and then the text from Container 2 under the image on a clean background color. So that the text is readable.

On desktop the text is right on a blured place next to the girls face.

[Tom]

Hmm, what if you gave the container with the text a semi-transparent background on mobile using CSS? That way the background image can stay the same, but the text will be readable.

[Kevin]

Yeah the idea is great, and i use it on other pages with this way, but for the branding of the person i need she without any text on there face 😉

[Tom]

Makes sense. So what exactly is the solution you’re wanting to implement? Not sure I’m fully understanding from the previous posts. An example would definitely help 🙂

[Kevin]

Sorry 😉

I would have a container and css solution to have a header like this – https://gabbybernstein.com/meet-gabby/

On Desktop a Image Background with Text (works already with 50% / 50% Container)
And on Mobile just a special Mobile Header Image and under the image the same Text like on Desktop but with a White Background, so it is good readable.

Hope it makes sense 😉

[Tom]

Got it!

I think you would have to:

1. Give your hero text container a class like this: hide-on-mobile

2. Create a second Container under the hero container with the text, and give it this class: hide-on-desktop hide-on-tablet

That way it should disappear on mobile and appear below.

[Author]

Posts