Can't affect bottom margin of text column element with extra class

[eternalbeta]

Using an extra class or any custom css, I seem to be unable to affect the border-bottom value for a text element, namely .wpb_text_column. The element is coded to have 10px of bottom margin by default, but that should be easy to override.

Let’s say I gave the element the custom class of ‘welcome’ I then write the custom css for it:

.welcome {
border-bottom: 1px #000;
margin-bottom: 40px !important;
padding: 8px;
}

The border and padding would be applied to the element, but the margin-bottom would be completely ignored, even with the !important tag, and the element would default back to 10px of margin. Even attempting to add a line directly onto the very end of the stylesheet gets ignored as well.

The only way I’ve found to change this value is to directly change .wpb_text_column, which I do not want to do as I want to affect only this one instance.

Thoughts?

[laranz – SUPPORT]

Hi,

Try this in Custom CSS.

Put the class name as welcome, and in Custom CSS try this

.welcome{
margin-bottom: 40px;
}

This works in my local installation, if not try some other css class name.

Can you give me the direct URL of the welcome text you put, I try to give my solution.

Thanks,
laranz.

[eternalbeta]

I’m sorry…but you what you just asked me to try is exactly the issue I reported as not working. I cannot provide a direct link as this is a site currently in development for a client with information I cannot release to the public.

However, I have figured out why this is happening, although I am unsure if it is technically a bug or simply because of the programming of how the row structure is implemented in this theme.

The element I was hoping to affect with margin-bottom is part of a row with another element, 2/3 and 1/3 respectively in the swift page builder. The element I wish to push down is also 2/3, so it lines up under the “welcome” class element. However, in this case, the element with the 1/3 width is ever so slightly taller than the “welcome” element. Because of this, it takes complete control of the margin-bottom for that row.

So even though the element I wish to push down is directly below the “welcome” element, I have to apply the custom class to element next to “welcome” in order to achieve my desired effect.

[laranz – SUPPORT]

Hi,

I solution I gave is working on a 1/1 column, I don’t aware of this, you are trying some other column styles.

Glad you fixed it up.. 🙂

Thanks,
laranz.