The grid spacing

[Web_Services]

My site is:

VerdEnergia's Mission To Change The World with Practical Permaculture

I want to fix two things on “the grid” plugin display on this page.

1: I want to completely get rid of the white spacing below the grid and above the footer global block. Is there a way I can change padding or something else to do this?

2: On some screen sizes, the entire grid is pushed to the far left of the screen and is being displayed oddly there. How can I fix this?

[Prasant]

Hello @Web_Services,

Thanks for writing in!

@Web_Services

1: I want to completely get rid of the white spacing below the grid and above the footer global block. Is there a way I can change padding or something else to do this?

An empty paragraph tag was causing the spacing issue. While checking the page in Cornerstone, I narrowed down to the paragraph tag added to display the grid via shortcode. I have removed the same and now the spacing is not there.

@Web_Services

2: On some screen sizes, the entire grid is pushed to the far left of the screen and is being displayed oddly there. How can I fix this?

I checked the website and can see that the Grid items are not displaying properly. I suggest you to edit the Grid and under Grid > Type, select Grid type or you can add spacing between individual items in Items Spacings (gutter) if you wish to use Justified layout.

Thanks.

[Web_Services]

1: Perfect, that’s the result I was looking for. However, I cannot replicate the solution for some reason.

Could you please do the exact same thing for the grids on these three pages?
http://dev2.verdenergia.org/team/
http://dev2.verdenergia.org/media/
http://dev2.verdenergia.org/products/

[Web_Services]

2: I added a gutter of 1 for each screen size on the grids while keeping it justified. This should fix the weird displays right? Will it work fine if I make the gutter size 0.00001 too?

[friech]

Hi @Web_Services,

1. I see that you used a Content Area element to place the Grid’s shortcode, please add the grid on a separate Section, then use the Classic Grid Element instead for adding your Grid into the page. Set the top and bottom padding of the Section and set its Global Container option to Off.

This will your section a fullwidth. See the new Section I added on that page for your reference.

2. Please navigate to your Grid Settings under Type choose Grid, set the Item Ratio to 16:9, then on the Number of Columns, set 3 until 768px screen, then 2 columns on 480px screen, and 1 column on smaller screens.

See the “About - Team” grid for your reference.

Cheers!