Mobile Header Container GB

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 :)

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

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.

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

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

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.

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.

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 ;)

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 :)

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 ;)

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.