Text Align changes, changes Margin default in content band row/column - WHY?

The text field content in a 3 column content band is has less margin when text is set to left alignment and more top margin when center aligned. Why? this makes customizing a well designed page layout difficult when there are inconsistencies like that. Please let me know how to keep all css consistent between any and all customizing like that. Thank you

Hi adubs777,

I’ve tried to reproduce this issue but I couldn’t, here you are what I’ve done so far:

1- I created a 3 columns layout with text element in every column as the following:

2- Then I set 5em margin from all the sides for every text element and I found them identical as in this screenshot:

Could you please let me know if I’m missing something? also, I would appreciate if you can provide a URL for the page with this issue.

Thanks.

Oh yea, the url. https://wishcandle.com/shop/ after fiddling with things on the content band, I got both text blocks aligning the same which is good. But another question: why does the top of the text block start down so much lower than where the other content in another column ( such as the search form ). I’d like all content to have a flush even layout until I customize css or adjust other things. Does that make sense?

Hi again,

Thank you for the URL. I checked your page and there are empty paragraph tags in your text content (see screenshot) that’s why the content starts lower than the search form in your first column.

It must be the white spaces, please remove all spaces, above and below from your text to make columns spacing consistent.

Hope this helps!

I removed all spaces and double checked all of those obvious things… as you can see in this screen shot there are no spaces or empty paragraph tags from the backend editor. How do you edit that content that I see in your screen shot?

Hi there,

I still see the empty P tags generated in the front end of your website. One way to temporary fix the case is to remove the P tag default margin from the CSS. You can add the CSS code below to X > Theme Options > CSS:

.x-container.wpb_row .x-column p {
    margin: 0;
}

That will fix the issue but it will not have a margin when you want to have for example 3 distinctive paragraphs in a text. In such a case you will need to manually add margin to the paragraphs which you want to have margins.

Alternatively, we can check the case on your installation and see why that extra empty P tag is showing, kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

I would like to find the actual cause of that issue and not temporarily “fix” it in that way you mentioned.
I’ll have to set up a new user name and pass. and get back to you again here later today, thanks.

Hi there,

The cause is the visual composer itself. I remember this was an issue before and Visual composer released a version for line breaks fixes. So we also released the same version.

Are you on latest visual composer version? I mean the latest version that we provide, if not, please update it.

Thanks!

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