Blockgrid without white space

Support
#1

Simple question. I solved it once but can not repeat the trick.
Would like to put 5 images in a block grid in a row without any white spaces between them.

#2

Solved by myself.

#3

Hi @Droogers,

Thanks for writing in.

If it is okay, please share us the answer so that other members of this community could see. This would be a great help to others that has similar idea.

If not, no worries. Feel free to ask us again.

Thank you so much :slight_smile:

#4

Hi Nico

Main problem was trying to make a five column block-grid.
That seems out of the scope of the X theme.

Used code:

.x-block-grid.four-up {
margin-bottom: 0;
}
.x-block-grid.four-up>li {
width: 25%;
margin-right: 0;
text-align: left;
}
.x-block-grid.four-up>li img {
margin-bottom: 0;
width: 100%;
height: auto;
}
@media (max-width: 480px){
.x-block-grid.four-up>li {
width: 100%;
margin: 0;
}
}

#5

Hey,

Thank you!

#6

Can this be reviewed pls for the new versions of theme, Cornerstone and WP…

Because I also want to make a 5 up grid, and it is forcing only four-up … regardless of what I change the width property too, it still forces a max of four across.

My specs:

I am not in PRO yet, I am still on Cornerstone, these are my setup details:

PHP: 5.6.33 (upgrading to 7.1 soon)
WordPress: 4.9.4–en_AU
Cornerstone: 2.1.7
X theme: 5.25

#7

Hi there,

We indeed will need a practical case to see the code live to be able to suggest you proper CSS or any alternative solution that is possible.

As you are not the original poster of the thread please open up a separate thread so that you can add Secure Note The Secure Note is visible to the original poster of the thread.

In the new thread, give us detailed information about the case and steps you took to add the 5 column grid block. Actually, add them to a test page and get back to us with the URL/User/Pass of your website and the name of the page to follow up the case.

Thank you for your understanding.

#8

I solved this myself, here is the solution if anyone else wanst to do this…

So this is for the latest version of WP, Cornerstone and X theme:

WordPress: 4.9.4–en_AU
Cornerstone: 2.1.7
X theme: 5.25

I added a 5 up grid by adding a Content Area element in Cornerstone editor, with this code… (when browser width is smaller it breaks up the grid in a not fluid way so I use a different section fo this and turn the sections on and off in Cornesrtone)

[block_grid type=“four-up”]

[block_grid_item] [image class=“my-portfolio” src="#" alt=“alt here” type=“thumbnail” link=“true” href="#" title=“title here”] [/block_grid_item]

[block_grid_item] [image class=“my-portfolio” src="#" alt=“alt here” type=“thumbnail” link=“true” href="#" title=“title here”] [/block_grid_item]

[block_grid_item] [image class=“my-portfolio” src="#" alt=“alt here” type=“thumbnail” link=“true” href="#" title=“title here”] [/block_grid_item]

[block_grid_item] [image class=“my-portfolio” src="#" alt=“alt here” type=“thumbnail” link=“true” href="#" title=“title here”] [/block_grid_item]

[block_grid_item] [image class=“my-portfolio” src="#" alt=“alt here” type=“thumbnail” link=“true” href="#" title=“title here”] [/block_grid_item]

[/block_grid]
[lightbox selector=".my-portfolio" deeplink=“true” opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal” thumbnails=“true”]

And to get it to display correctly as a 5 up I needed to add this CSS (Customiser > Custom > Edit Global CSS):

.x-block-grid.four-up>li {
width: 18%;
}

.x-block-grid>li {
display: block;
float: left;
height: auto;
margin: 0;
padding: 0;
}
.x-block-grid.four-up>li:nth-child(5n+1) {
clear: both !important;
}

.x-block-grid.four-up>li:nth-child(4n+1) {
clear: none !important;
}

.x-block-grid-item .x-img-thumbnail {
border: none !important;
}

#9

X theme support - can I have some clarification here pls .because this shortcode DID work fine on my site which is using the latest Cornesrtone, X theme and WordPress…

BUT - I have read various posts on here saying that shortcodes are now outdated?? Is this true? Or is it only certain shortcodes?

I can’t seem to find anywhere where this is explained clearly for the new updated system?

If shortcodes ARE OK, then which of the new elements should they be used in? My example above it was a Content Area element and this worked, what else can accept them?

Thx.

#10

Hi there,

The shortcodes are still valid to work with. We encourage that customers use the elements and the layout of the Cornerstone itself. New V2 elements do not have a shortcode representing themselves, so for example in classic elements you could use the shortcode version of the element. V2 elements do not have a shortcode.

If you want to use v2 elements as shortcodes you will need to add them to a global block which then they will be available as a global block shortcodes in the new version of the theme. For more information about the global blocks:

Please do not follow up the case here and open up a separate thread if you need more assistance.

Thank you.