[Resolved] Postion content within elements

[Aldrin]

Hi there, I’m having a challenging time positioning the <h1>{{post_title}}</h1> within the element to show in a position other than center, left or right. I’ve even tried giving the .inside-page-hero a position: relative and incased <h1>{{post_title}}</h1> within a div with position: absolute; top:100px; left: 50px;

The issue is the background image for the element becomes smaller, hiding parts of the image. I hope I’m being clear enough. I have a sample image here where I’d like the content in the element to display.

https://whatsupweekly.com/sample.jpg

[Aldrin]

I think the best way is to do it is by controlling the padding within the elements. Setting the top padding higher than the lower resulted in the content being pushed down. Same thing goes with the left and right padding. Is this pretty much the correct way of trying to acheive what I’m trying to do?

[Tom]

Hi there,

That sounds like a good solution.

You can also give the <h1> a class, then add margin to it to move it around:

<h1 class="my-h1-class">{{post_title}}</h1>

.my-h1-class {
    margin-top: 100px;
}

[Aldrin]

Thanks Tom..it works well.

[Tom]

You’re welcome 🙂

[Author]

Posts