Streaming live at 10am (PST)

How to Fix Grid Spacing Issue


#1

Hello,

I am trying to reduce the margins of the grid components to match my actual design. I am unable to fix it. Please help.

Here it is on Webflow:

Here it is on Photoshop:

Here is my Webflow Project:
https://preview.webflow.com/preview/vanguard-gaming?utm_source=vanguard-gaming&preview=3f0ccc3474a412168164f17df1a9892e

Thanks


#2

Hi Chethankvs,

You could try to use Dynamic listing to get your BG on your collection item instead of using an image component, you have much more control using a background on a div in general, Images component have aspect ratio issues in some cases.

Also I find the combo container and columns rather limiting in most cases, you may want to try the divs and flexbox combo, much more freedom.

Cheers,


#3

Hey,

I am new to Webflow so I am not aware of a few terms.

Can you tell me where I can find this Dynamic Listing option?
Also, I tried using Div blocks but I was not able to place the 3 boxes in such fashion. And the content is driven from CMS. How do I incorporate that in Div Block?

Thanks


#4

you can check the page margin settings that cause to your page


#5

I did try. If you dont mind can you take a look and share the exact settings?


#6

Hello @Chethankvs

First of all your images have space around them. See bellow

I think the problem comes from here. I’ts better to use divs with background image like @ColibriMedia suggests.

First remove the space around the images. Next you can use divs or link blocks with background photos and add a radius and shadow to mach your design.

Piter


#7

Awesome Thanks. I see the Problem.

Another Question. How do I arrange the div blocks in such a fashion with 1 columns and 2 rows? Should I use the Flex Mode?


#8

I can show you :wink: Using flex box is way better.


#9

Please do. Its easier to understand when I see it :slight_smile:


#10

Absolutely! Here’s how it looks right now

The body is another color so you can see the shadow. I will show you what I’ve done.

Piter


#11

Okey, here’s my approach:

Check the video and tell me if you have problems > https://www.useloom.com/share/a9ffc19331dd495f89b913bc10187b37

I think with video is better, but my mic is not working…You will do it :muscle:

Piter


#12

Great video @PiterDimitrov. Hopefully CSS-Grid will be released soon.


#13

OMG! You are a Life Saver!

I am very very grateful.

Thanks


#14

Yeaa will be very very nice! Flex box is amazing too :blush:


#15

Thank you! Happy to help

Piter