Problem with placing positioned text over stretched background image

Hi Sazzybee

Thanks for reaching out.

Looks like you know what you’re doing so I’ll just jump straight in. This is the first challenge:

style="margin: 300px auto -20px 10%;"

Rather use a custom class applied via the Attributes tab. Use Custom CSS to target that class so you can do things like drop the 300px top margin below a given resolution. Something like:

.custom-hero {
margin: 300px auto -20px 10%;
}

@media (max-width: 680px) {

.custom-hero {
margin: 10% auto -20px 10%;
}

}

That’s un-tested but you get the idea.

The final challenge is that at some point the text is too big for the container. At that point, the image stops re-sizing because the text is sort of holding the container up. The solution to this would be to drop the text size at a breakpoint.

In your media query you could say:

@media (max-width: 680px) {

.custom-hero {
font-size: 80%;
margin: 10% auto -20px 10%;
}

}

Or, individually set new font sizes within the media query for the various h tags.

Page Builder can’t, by default, handle what you’re trying so this puts us into the custom development space we see above.