Remove extra space caused by block grid element

Support
#1

I am using the block grid element (not shortcode) to break text up into 2 columns. Looks great on desktop, but on mobile, there’s an extra space between the text on the bottom of first column and the text on top of second column. Is there anything I can do to fix this?

Thanks,

#2

Hi Cindy,

Thanks for writing in. To achieve that, try adding this custom css.

@media(max-width:480px){
    ul.x-block-grid.two-up .x-block-grid-item p:last-child {
        margin-bottom:0;
    }
}

Hope it works. If it doesn’t can you share the url of the page with the block grid? So we can give you a more accurate css.

Thanks!

#3

I’m afraid it didn’t although it did in one instance. The page in question is being built with many global blocks because the content is organized using tabs. I’ve indicated in the images below which ones have extra space and the one instance where it worked. Perhaps the way I built the page is too complicated? If you have a better suggestion, I’d appreciate it too.

#4

Hi Cindy,

For that CSS to work, please make sure that the last content on the BLOCK GRID ELEMENT is wrap by parapgraph tag: <p>content here</p>.

I have also checked and notice that you do have empty paragraphs there: https://screencast-o-matic.com/watch/cqXtILUgFw

#5

I made sure the last content on the BLOCK GRID ELEMENT is wrapped by the code. But there’s no change. As for the empty paragraphs, I added those purposely, they’re not in BLOCK GRID ELEMENT.

#6

Hi Cindy,

That is actually the default top margin of the grid items (except first item) so those items will not look adjoining on the mobile view.


But since your content are text and you want it to look like in one paragraph, please add this to the Page > CSS area

@media (max-width: 480px) {
	.x-block-grid.two-up>li:nth-child(2) {
	    margin-top: 0!important;
	}
}

This will remove those default top margin of the grid items on the mobile view.

But please keep in mind that even if those are empty paragraphs those will still have the default bottom margin, so better add a class man to those paragraphs so it does not produce any spacing.

e.g.

<p class="man"></p>

Hope it helps,
Cheers!

#7

Thanks, in the end I rebuilt the page using shortcodes which solved the problem.

#8

Glad things sorted out on your end now,

Cheers!

#9

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