Object position moves when screen maximized

HTML-CSS
1

I just got my responsive web design cert and wanted to continue front end work. I am starting a project on frontendmentor.com and I am having some issues with keeping a div in place.

When i minimize the section the right .main-focus-title does not hold it’s position and overlaps the image div. when maximized it floats way far out to the right. How do I position it and keep it there?

2

Hey there,

great work so far!

So I think you are talking about the Build The Community Your Fans Will Love heading?

This is the CSS for it:

.main-focus-title{
  position:relative; 
  top:-510px; 
}

Do you understand what these lines do?

3

Correct! that and the paragraph element. I made the position relative to be able to move it freely. Is that not correct?

4

Hey there,

so using position: relative makes sense in some specific cases, but personally I try to use it as rarely as possible.

Let’s have a look what you want the user to see:

header
box with illustration, heading and paragraph
link/button to register
footer

Let’s have a look at your code structure:

header
box with illustration
box with heading and paragraph
link/button to register
footer

So you tried to move the heading and paragraph on the same height of the illustration by moving it outside of its normal flow by using position: relative.

So my best solution would try to make the box as a flexbox.
On a wide screen: illustration, heading and paragraph live in a row.
On a small screen: illustration, heading and paragraph live in a column.

So in the end you only have to change the direction in the box where illustration, heading and paragraph live.

I created a small mockup:

codingdutchman-layout
codingdutchman-layout1216×798 138 KB

5