A box grid for showcasing Images and or WooCommerce products

Support
#1

Hi there,

I am wondering if there is a feature within the xtheme to have a box style layout like these screenshots here

Here is a link to the site I am working on https://starcarsgoldcoast.com.au, as you can see the car section i am trying to recreate this draft drawing I have attached with white lines.

I have managed to the outside borders done, but I need vertical lines down the middle…

#2

Hi there,

Thanks for writing around! You can do this with Classic Block Grid element by choosing 4 columns in the settings. To give the grid a border, just give the block grid element a class custom-grid and then add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.custom-grid.four-up {
    border: 1px solid #ccc;
}
.custom-grid.four-up .x-block-grid-item {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid;
    margin-right: 0;
    padding: 2.5%;
    width: 25%
}
.custom-grid.four-up .x-block-grid-item:last-child {
    border-right: none;
    margin-right: 0;
}
.custom-grid.four-up .x-block-grid-item:first-child {
    border-bottom: none;
}

Hope this helps!

#3

Hi there thanks for you help,

That is only giving me a border around my custom grid, not the vertical lines down the middle like in the screenshot I provided, hmmm no easy way to do this for my client it seems :frowning: :frowning:

#4

Now it seems to be doing this when adding new rows it does join up

#5

I managed to find an alternitive, by going to each images separate column, turning on marginless column and giving them each a 2px solid border all the way around.

Thanks for your help!

#6

We are glad that you find a way to do this.

Thanks

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.