Match image gaps between columns and block grid

[pkingco]

Hi,

I wasn’t able to find this specific issue in the forum so I thought I would ask. I am attempting to create a mosaic type structure with images and a section of text. I’ve set up my columns to 1/4 + 1/2 + 1/4. I then added a Classic Block Grid element of 2 columns into the 1/2 column.

My question is how might I adjust the gaps/spacing (margins I think) between the images to make them all match.
The source images are bigger than the space allotted so as the gaps/space gets smaller the images should enlarge without issue.

I’ve attached a screen shot to show what I mean. The green circles are where I am trying to make the same. As my explanation my be confusing.

http://181.224.136.100/~assoc522/wordpress/about/

Pro version: 1.2.7
Wordpress version: 4.9.1

Thanks
Garet

[basanta]

Hi There,

Thanks for writing in!

I can see you have set the margin in percent value. Please put the margin in “em” value for the column and the two images.

Let us know how it works!

Thanks

[pkingco]

Hi,

I see what you are going for I think. A couple of things though.

1. The percent value is auto inserted by the theme not me. When I look at it in an inspector it looks as though it is 4%.
2. In the wizzy wig on the left, for the Columns, I don’t have the option to adjust the margins, only the padding. And everything else (section, row, etc.) is set up in ems. What I can do is go into customize for each column and add margin spacing there. This is what I have done for this example.

I’ve added in margin spacing .5em between each column and then between the grid block items. Everything in the row seems to left align when I do this, instead of resizing and centering. I also can’t get the grid block items to fill the space automatically.

I’ve attached a screen shot for an example. I added a red border to make it easier to see the spacing discrepancies.

Thanks
Garet

[friech]

Hi Garet,

Please remove all the inline margins you applied to the columns and grids. Then add a CLASS mosaic to your section, and add this to Theme Options > CSS

@media (min-width: 768px) {
	/*1/4 columns width and right margin*/
	.mosaic .x-column.x-1-4 {
		width: 23%;
		margin-right: 2%;
	}
	/*last column right margin*/
		.mosaic .x-column.x-1-4:last-of-type {
			margin-right: 0;
		}
	/*1/2 column width and right margin*/
		.mosaic .x-column.x-1-2 {
			width: 50%;
			margin-right: 2%;
		}
	/*grid bottom margin*/
		.mosaic .x-block-grid {
			margin-bottom: 0;
		}
	/*grid items width and right and bottom margin*/
		.mosaic .x-block-grid>li {
			width: 48%;
			margin-right: 4%;
			margin-bottom: 4%;
		}
	/*generated p tag and img bottom margin*/
		.mosaic .x-block-grid>li p,
		.mosaic .x-block-grid>li img {
			margin-bottom: 0;
		}
}

Please read the comments on which CSS block is for which element. Feel free to adjust it, but remember all columns width plus margins should equal to 100%.

Hope it helps,
Cheers!

[pkingco]

Outstanding! It works perfectly.

You guys never cease to amaze. Thanks for going above and beyond with the assist.

Garet

[jade]

You’re most welcome, Garet.

And thanks for the kind words!

Cheers!