Quick help - grid layout issue - overlapping

Hey guys! I’m trying to recreate this

Any idea how?

I tried putting a heading inside of a div block but for whatever reason, the heading is going on the outside of the div block.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Please post your read only link to get help with your issue.


You are putting your heading inside a div that is too small for this heading. Make the div the same width as its parent grid element

Going to give it a shot. Still new and have been studying positioning like crazy.

I believe you want to make your “G-DIV-INSIDE” relative and make your “h4” to absolute. Now the h4 is relative to the “G-DIV-INSIDE”. Now play with positioning to get it where you want. :slight_smile:

One of these pros will correct me if I’m wrong. :stuck_out_tongue:

As you can see from the screen that OwlSky is trying to recreate, the grid elements are simple - title, image, some description, everything one after another. There is no need for absolutely positioned children inside the divs.

1 Like


Even with shrinking the size of heading it still won’t fit inside the parent div block.

Your parent div block (G-DIV-INSIDE) is too small for its content. It is just 100px width in height which is limiting what could fit inside. Remove the size limits so that it can be as large as necessary to accommodate for the things you put inside.

Ah, Easy fix, Awesome.

Any idea how to FLEX the objects to stack from header top to image below?

Here is the article you need read to understand how to use a flexbox.

Much love my man! Got it sorted out. Thank you so much for the quick support.

No problem, happy designing!