Help placing this grid element properly

Hey there webflowers!

I am just getting started on the platform. I had an agency set me up in order to be able to manager my site myself. I’m still learning best I can but I was wondering if someone could help me with this one element question.

I have a 3 x 3 grid and I am trying to copy & paste and the element below. The issue is that the element keeps filling into a space that I don’t want it to fill into (see image below)

How can I make it so that the image that is on the left hand side only shows up on the grid slots to the right of it. Does that make sense?

Here is the project: https://preview.webflow.com/preview/lavo-b74219?utm_medium=preview_link&utm_source=designer&utm_content=lavo-b74219&preview=2d517e0e73884b9f7af464be1aa0cd57&mode=preview


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

You just paste something else (like a div block) into the Grid where the image is actually going then paste the image into the other two grids

image

But then on mobile there is a black box no?

Try it out it should show a black box in the designer but the live site won’t show anything as long as you leave the div with no styling settings

It’s working well on desktop and mobile. But horizontal and tablet is giving me this. Any tricks to remove div from only these two devices?

Hi Nicholas,

You can accomplish this in two steps:

*Make these edits under the desktop base breakpoint

Step 1:
Delete the div box you placed in the grid as a placeholder.

Step 2:
Drag the grid (click and hold bottom right corner) that contains the main heading into the grid right below it. The images should rearrange to the right once you do this.

1 Like

Drag the div into the left column but then this would somewhat stretch the card, is this fine?

It worked and I learned something new!

Thank you @lol_no and @_Chris for helping me figure this out!!!

no problem happy designing