Streaming live at 10am (PST)

Responsive Image Issue

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

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

Result:

image


Steps:

1. Set the image to be first on mobile:
image

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)
image

Done :slight_smile:

2 Likes

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

1 Like

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