custom column gap?

Hi,
Thanks for the link to your page, I’m not sure where you would like a gap, I looked for two columns and picked this one (screenshot 1) the yellow link.
So for this you could use this css:

#top.page-id-3392 #main > div > div > main > div > div > div:nth-child(4) {
	border-spacing: 6px !important;
}

but this add the space around the whole element (screenshot 2), now a blue line.
Another option is to add a 3px border to the two columns on the right and left only and then match the border color with the background so it fakes the space, (screenshot 3).

#top.page-id-3392 #main > div > div > main > div > div > div:nth-child(4) .first {
	border-right-width: 3px !important;
	border-color: #007FC8 !important;
}
#top.page-id-3392 #main > div > div > main > div > div > div:nth-child(4) .first + .av_one_half {
	border-left-width: 3px !important;
	border-color: #007FC8 !important;
}

When you try these codes please only try one at a time a be sure to clear your browser cache each time.
If this is not the correct area please try posting a screenshot of the area.

Best regards,
Mike

Hi,
Thank you for the feedback, to add a white border to the second solution please try this css instead:

#top.page-id-3392 #main > div > div > main > div > div > div:nth-child(4) .first {
	border-right-width: 3px !important;
	border-color: #007FC8 !important;
	box-shadow:inset 0px 0px 0px 2px #fff;
}
#top.page-id-3392 #main > div > div > main > div > div > div:nth-child(4) .first + .av_one_half {
	border-left-width: 3px !important;
	border-color: #007FC8 !important;
	box-shadow:inset 0px 0px 0px 2px #fff;
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
You could try:

#top.page-id-3392 .av_one_fifth.avia-builder-el-27,#top.page-id-3392 .av_one_fifth.avia-builder-el-30 {
    margin-left: 6px !important;
}

But I saw your mockup image at the bottom of the page and I believe this will be difficult to achieve with your current elements.
It looks like the purpose of your grid is cell links to your other pages if I had to create this I might use an html grid layout generator and add the code to a code block element on the page, for the basic grid layout, if this is an option for you please see these generators:
Layoutit
CSS Grid Generator
DIV TABLE
These are a few I found on Google, there are many more.
Another option might be to use the Masonry Portfolio Example: 4 Column Masonry Grid, or the Grid Row element, but you would need to create each box as a portfolio item, which in itself might be a larger task than is needed.

Best regards,
Mike

Hi,
Glad to hear you have it sorted out, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike