Putting a container on a certain position on a page

Hey Oliver,

Using negative margins like this can certainly be tricky.

Is there a particular reason why the hero with the background image and the text are in completely separate locations? It would be a lot easier to achieve the layout you’re after if they were located inside of the same container.

Ah, got it. David is on vacation, so I’ll do my best to follow along with his thinking here.

Would it be possible for you to add the text in the box inside the same Container as the Image Block that you added on mobile only? Or would that mess with something?

If it were me (and I may be missing context here, so I apologize if so), I would do the following:

1. Add my Container (you already have this)
2. Add my image inside of the Container (you already have this)
3. After the Image block, I would add a new Container
4. In this new Container, I would add my text

If we have that structure, we can use a little CSS to place the container with the text on top of the image quite easily.

Ok, next steps.

1. Give the Container with the hero image inside of it a class name. Let’s say: mobile-hero
2. Give the Container with the text inside of it a class name. Let’s say: mobile-hero-text

Add this CSS:

.mobile-hero {
    position: relative;
}

.mobile-hero > .mobile-hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    transform: translate(-50%, -50%);
}

You can add things like a background color, text color etc.. in the block settings for that Container.

For the copyright, let’s do the same thing. Are you able to add it inside of our mobile-hero Container block, and give it a class name of it’s own?

Glad I could help! You as well 🙂

Thanks!