Docs

[Phil Y]

Hi there!

I’ve had a look through your replies to others users issues on this topic and have tried applying what you’ve suggested but nothing seems to be changing the block grid on my page, Please help!

[Prasant Rai]

Hello Phil,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[Phil Y]

http://systemic-change.cloudns.cc/index.php/about/

[Rupok]

Hi there,

Thanks for the URL You can use this CSS :

.x-block-grid-item img {
  width: 100%;
}

Cheers!

[Phil Y]

Thanks for the help, but its not quite what Im after. When i add in the shortcode the gaps do fill in but only because the images are larger, im not looking to increase image size, just the gaps between. I’ve attached a screenshot of the ess grid ive used above which shows the images and gaps at the correct size. Ive chosen to replace the ess grid with the block grid because when the screen shrinks to mobile or tablet size the ess grid items expand and form a single column, whereas the block grid elements remain the same size, which is what Id prefer.

So my question is, is it possible to reduce the gap size between images on the block grid whilst keeping the images small as they are. Or possibly a way to stop the ess grid items from expanding and forming a single large column when going switching to tablet and mobile view?

[Paul R]

Hi Phil,

You can add this under Cornerstone > Settings > Custom CSS

https://www.screencast.com/t/UIPW7GRa

.x-block-grid-item img {
    width: 100%;
}

#cs-content .x-block-grid.four-up>li {
    width: 20%;
    margin-right:1%;
}

Change width and margin right to achieve your desired look.

Hope that helps.

[Author]

Posts