3 column margins, creating separation

rlucas1060 · October 2018

Hello, how may I create separation between these columns? https://www.kb.jniplants.com/introductions/

- I don't care how much space. I can play/wiggle after I figure out how. On desktop, there would appear to be some separation between the boxes, and on mobile the boxes would appear to have some separation instead of appearing to be stacked on top of each other.

I do have some custom CSS already applied to these columns:

/* Wrap border for products */

.wrapproductborder {

border: 1px solid #bababa;

border-style: solid !important;

border-radius: 5px;

background: #ffffff;

}

Thank you - as always - for the help!

Pablo · October 2018

Hi,

You have to create similar to this:

http://prntscr.com/l4v3h2

Also, set in the Section, the Equal Height | wraps

http://prntscr.com/l4v44y

Thanks

rlucas1060 · October 2018

REVISION: On second thought, I don't think we're on the same page. I'm looking to create (i.e 5px) separation between the wraps, on all sides

https://www.kb.jniplants.com/wp-content/uploads/2018/10/btheme-help2.jpg

-----------------------

I see. And because I have the wrap setup like this, I would need to shortcode the 3 internal elements within the (1) 3/5 column to allow the (2) 1/5 side columns to do their job?

https://www.kb.jniplants.com/wp-content/uploads/2018/10/btheme-help1.jpg

Bryan · October 2018

You cannot set separations for wraps if they have backgrounds or borders. You can only add padding to them and mak the border or background color using a column, inside the wrap.

The space is created using padding in the wrap settings.

So instead of placing 3 items in a wrap and using custom css for the wrap, use one column and insert text, image and button with shordcodes. Then add border to the columns and set padding to the wrap.

rlucas1060 · October 2018

Great! I'm closer. 2 more questions came up.

1) Why would the button's icon and title positioning look different from builder to shortcode? See screenshot. How to fix so it looks nicer, like builder element?

2) How to remove the mysterious padding below the button shortcode? I only want it to apply to that button, not site-wide buttons.

This illustrates both topics above:

https://www.kb.jniplants.com/wp-content/uploads/2017/12/btheme-help3.jpg

Thanks for all your help - very much appreciated.

Pablo · October 2018

Hi,

1) Is your shortcode button size same as your button from builder?

http://prntscr.com/l7fn36

2) I do not see 'mysterious padding', it must have some padding/margin value, because if we will remove it, then wraps could cover other wraps a little bit.

This will fix your icons

body.single-post a.button.button_size_1 .button_icon{
	padding-right:3px !important;
}

Thanks

3 column margins, creating separation

Comments