Positioning Elements is getting weird?

[thinkliftbecome]

Hello guys , here is my website thinkliftbecome.com
I am having many problems with setting it up and messaging support back and forth takes a lot of time so I thought I would throw this is in here.

So , whenever I add an element and style it by adding a position: absolute; or position: relative; and I try to add another style tag(?) then it gets messed up and out of position. I left the button on my site out of position intentionally to show you what I mean. It was supposed to be right below the text but when I added my font-family: “Hammersmith One”, it went out of position. Why is this happening? How can I fix such things. The question really is how can I position my elements without them moving whenever I add a new element nearby or add a tag.

[friech]

Hi There,

Thank you for writing in, please provide us screenshot or the entire inline STYLE of the Custom Headline. It might be syntax error that causing the issue.

However, the button right now is in its correct position (top-left). You set your Custom Headline position as absolute so the section act as if that custom headline is not part of the content and only has the button as its real content, which place the button on top-left (unless you set the section alignment to center or right)

If your goal is to have the headline and button vertically center on the section, then do not position: absolute; it instead place it as normal content, then add a Gap element above and below to vertically center it. Set the section alignment to center, so the headline and button will be centered horizontally.

Cheers!

[thinkliftbecome]

Thanks for the response!
I understand what you are saying .
I have another problem now , Trying to arrange my elements and sections in the inspector using padding/margins and height: *vh; in style to make them have the spacing I want and while they do look ok on my narrow laptop screen , they look a bit more spacey on my 1920x1080 pc screen(big gaps) and TOTALLY messed up when I view my site on my mobile.Everything looks different on every screen.I also know it is because I am really not knowledgeable in what I am doing. Would you be able to check it out? Do you want my credentials?
My website : www.thinkliftbecome.com

John

[Joao]

Hi There,

Please avoid using height, use max-height or min-height instead. height is absolute and it is tricky to make it work trough all screens.

Hope it helps

[thinkliftbecome]

so what you are saying is that if I use max height etc , my elements will stay in position and not overlap each other when viewed on different screens?

[nabeel]

Hi again,

Max-height will restrict an element to the specified height. This may solve the issue, howevere you can also use media queries to specify different heights in different screens to avoid overlapping. please see https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Hope this helps!

[thinkliftbecome]

Hm I see , btw how Can I make my posts like this ? With the title first , an image next and then the text?
And for some reason I can’t make my email form full width. (I want to make smt like this email form https://smartblogger.com/)

[nabeel]

Hi again,

This is the default structure of the post, the title comes first then the featured image and then the content of the post see http://demo.theme.co/renew-1/blog/ since you’re also using renew stack.

For the similar email form have you tried using Content Dock? see demo here http://demo.theme.co/content-dock/

Hope this helps!