Quick help - grid layout issue - overlapping

Design help General
1

Hey guys! I’m trying to recreate this

image
image1151×548 46.6 KB

Any idea how?

image
image1920×937 56.7 KB

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)

2

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

3

https://preview.webflow.com/preview/gog-home?utm_medium=preview_link&utm_source=designer&utm_content=gog-home&preview=646b3f007fb5b01402163584bda565f3&mode=preview

4

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

5

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:

6

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
7

image

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

8

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.

9

Ah, Easy fix, Awesome.

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

10

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

11

image
image1920×937 32.9 KB

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

12

No problem, happy designing!

2 Likes