Responsive Image Issue

[RowdyR (Rowdy Roque)]

I need a bit of assistance, The first image is how my site is on PC, i think it looks great.
However i cant get the mobile to look good. On mobile the image is below the text and if I move it above the heading or text (mobile), it moves the image to the left or on top of the text on PC, this is what im trying to avoid.

Im not sure what im doing wrong but any help as well as advice or tips on making the site look and feel better would be great…

Here is my site Read-Only: https://preview.webflow.com/preview/rowdys-dandy-project?utm_medium=preview_link&utm_source=dashboard&utm_content=rowdys-dandy-project&preview=872542852d002fe8f9349a43b4926972&mode=preview

[Siton_Systems (Ezra Siton)]

No “one-solution” for this idea - but try this:

Result:

---

Steps:

1. Set the image to be first on mobile:

2. Wrapper - Remove the extra space

3.GAP: Minimize the space between grid-item 1 & 2:

4. Smaller line-height for h1:

5. Smaller margin:

6. Align text to center (+ less line-height 1.6)

Done

[RowdyR (Rowdy Roque)]

That literally was everything I was looking for. It fixed the problem!
THANK YOU SO MUCH.

[Siton_Systems (Ezra Siton)]

Great Please mark as solution to close this topic. Thanks!