Random White Space Appearing In Column

[splashesmarketing]

Hey there, hopefully I can get some help with this issue, I’m trying to set up a simple block on my home page to display our latest blog post. To do this I’m using a Wordpress Plugin, and have the shortcode in a content area. However, I can’t get this content are to play nicely with the other things on the page.

This is with the column set to “stretch” vertically. It leaves a random white space below the content area even though I have all the padding set to 0 for its containing column.

So then I tried to set the containing column to “start” vertically, and use custom css to make the giving back block have the flex-grow: 1 property, but it doesn’t grow to fill the space, even with !important tags shown below. But the white space isn’t there! Why can’t I stretch without the white space??

SO THEN I tried to give the column containing the blog preview a max height, and the content ignores that and still adds the white space like the first screen shot…

Does anyone have any ideas?

Site is located here

[friech]

Hi @splashesmarketing,

Thank you for writing in, please make your inner row a 2 columns layout, not one column.

Then add this to your Inner Row’s Element CSS area

$el {height: 100%;}
$el > .x-row-inner {
  flex-direction: column;
}

Hope it helps,
Cheers!

[splashesmarketing]

It did help! Thank you for the reply! Though some white space went away, I have now discovered the real problem.

When I change blog posts, the column height is responding to the image size no matter what I do, i’ve tried to hide overflow for the column and the specific element to see if that would give me a direction but I can’t seem to figure it out.

I’ve also tried to force the second column to take the remaining height with no luck… Frustrating! If you have any ideas they would be much appreciated

@friech

[christian]

Hey @splashesmarketing,

I currently see a white gap below the first column. Do you want to fill that with the light pink background color? If so, set the column’s background to that light pink. That will cover the column in all screen sizes.

It would look like this:

Hope that helps.

[splashesmarketing]

No, that’s happening because the two columns in on the right are pushing beyond their allowed space. The top right column (the grey car) should have the heading and excerpt like in my original post, but it is hidden behind the “splashes is giving back” column

[friech]

Hi @splashesmarketing,

The two columns on the right have the same height, the issue is the Post Grid plugin is not respecting that height.

Try adding this to Page > CSS

img[alt="x-kote-paint-renewal"] {
	max-height: 303.5px !important;
}

Please note that there is nothing special on this CSS code, I just made your Post Grid Image the same height as the column.

If you have a further issue regarding this plugin, please contact the plugin author as we can not really provide support for 3rd party plugins.

Thank you for understanding,