Grid images showing up as cut off on live view

When on live view, the grid images show up as cut off near the top. Any ideas?

Hi @jtorr19,

  1. Your using background images with no div.

  2. If you want to use this, you’ll need to add a really high specific size to the grid, because it’s a BG image, so technically there is no size. And auto won’t work.

  3. I would add a div into each grid box, then put an image inside, or you can use BG image, but on the grid - add 20 vh and 20 vw. Something like that. But using background image will need a lot of size to show it.

  4. It’s currently using FR, which is a unit… with BG there’s really no size, so now it’s saying a unit of what? There’s nothing there… hope that makes sense.

  5. A warning though, this will move your grid all over the place. I never could get it to work exactly right without adding divs to have complete control. And in IE, Edge, Firefox, my grid was all off the page.

Take care.

I add divs to each cell area that I chose and added a background image. Should I add a div and just drop the image into the div? The background image was working so well with cover. I dont understand how is this done on youtube videos with no problem and Im doing just like they are but I’m having this issue?? Please get back to me on this.

Yes I would use a Div in each section, then you can drag the edges of each Div to fit where you want it. Can you share the video from YouTube?

I’m not sure what is happening. Just remember, a BG image doesn’t take up space, an image inside a Div does.

Hello Gary, I have been adding background images only in divs which is what I seen YouTubers do as well as the narrator for Webflow. Somehow he adds images without divs and it still looks perfect on live view. I have done what this guy in youtube has done over and over and tried to see where Im going wrong. This worries me because I want to build some clients websites in pure grid and flexbox.

Okay let me watch it … I’m here at the computer… one sec…

Okay, yes he’s adding the size to the “Grid”. Remember that’s what I was saying.

If you’re using BG images, add the sizing to the edges in the grid. Show me your read-only link again and I’ll look at it.