How to align items in two columns without gap

[Mesh]

Hi there,

Is there a way to align items in columns side by side without the gap increasing in the left column as I’d like the left column to stay tight and add a card/classic accordion to the right.

As you can see in the pic, when I added the accordion the whole section adjusted to the right column. Is there a way to keep the left column tight?

I’ll also send the log in details in a secure note. https://foodmesh.ca/news-events/

[paul.r]

Hi,

To achieve that, you can use just one section and row with 2/3 -1/3 columns

Add all your image and text in 2/3 columns then add your accordion and text in your 1/3 column.

You can use blockgrid element to create two columns for your image and text.

http://demo.theme.co/integrity-1/shortcodes/block-grid/

Hope this helps

[Mesh]

Hi Paul,

That’s what I have done so far. But when I add the accordion to 1/3 since it has more text it creates gap between the first row and the second row.

Here I have followed the instructions. But it still doesn’t seem right.

When I saved it, it shows like this, instead of two columns and the image is really small.

[thai]

Hi There,

Please add the following CSS under X > Theme Options > CSS:

.align-items-center {
  	display: flex !important;
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
}
```

After that add the `align-items-center` class to your `Row` contains the images and texts:

https://i.imgur.com/CPWM3Dd.png

Hope it helps :)

[Mesh]

@thai

lign-items-center

Thanks for the suggestion! But it still doesn’t seem to be working. Any other ideas?

There are still four columns and the images are very small probably because of that?

[ruenel]

Hello There,

I have checked your elements and you have inserted two block grids and the first one is empty.

Your first grid item has this contents:

<p>[block_grid type="two-up"] [block_grid_item] [image src="https://foodmesh.ca/wp-content/uploads/2018/03/bioenterpriselogo.png" type="thumbnail"] [/block_grid_item] [block_grid_item]</p><h5><span style="color: #347a1f;"><a href="http://www.bioenterprise.ca/index.cfm?page=newsItem&amp;id=446" target="_blank" rel="noopener" style="color: #347a1f;">Canadian Agri-Technology Innovation Spotlight: Giving Food A Second Chance</a></span></h5><p>[/block_grid_item] [block_grid_item] [image src="<img src="https://foodmesh.ca/wp-content/uploads/2018/03/bcbusiness.png" />" type="thumbnail"] [/block_grid_item] [block_grid_item]</p><h5><a href="https://www.bcbusiness.ca/Lunch-with-FoodMesh-founder-and-CEO-Jessica-Pautsch" target="_blank" rel="noopener"><span style="color: #377926;">An online effort to tackle food waste in the city</span></a></h5><p>[/block_grid_item] [/block_grid]</p>

Please remove the <p> tag because it is not needed.

Now the result is four columns because your block grid has two coloumns and within each column you inserted another block grid shortcode that is two columns. This makes it a nested block grid which resulted to a 4 column layout. If you only need two column, please make sure of the parent block grid items instead.

Hope this make sense.

[Mesh]

Hi RueNel,

I followed your instructions and now it looks like this. Still doesn’t look right.

[christopher]

Hi there,

I am confused what you consider to look right. I have a suggestion to use the normal layout system of the theme and do not use the block grid. Instead, do as follows:

1. Backup your website completely and update the theme to version 6.0.4 and the Cornerstone to version 3.0.4.
2. Then please add the 2/3 1/3 columns. The 2/3 will contain 2 more columns later. The 1/3 will have the accordion.
3. Go to X > Global Blocks and add whatever you would add a two columns inside the 2/3 on that global block. (Global Block is a new feature which is the reason I asked you to update the theme.)
4. Now that you have a global block with 2 columns containing the images, use the Global Block Element in the 2/3 column and add the block there.

That way you will have the same standard layout system and have the nested columns implemented without the use of the block grids.

Worths to mention that it is better that you go to the Row settings of the section in question and make the row without a container and marginless:

That way you will not have any space between the columns. You can do the same inside the Global Block too.

Thank you.