Margin Column Issue

Support
#1

Hi there,

I would like to be able to have columns with margins, but when I change from marginless to margin the entire page layout gets messed up and the column appears beneath one another rather than side by side. I do not know what is causing this but would really appreciate some help. Thanks!

#2

Hi There,

The issue is because of the following custom CSS: https://screencast-o-matic.com/watch/cFVefMon4N

@media screen and (min-width: 768px) {		
.x-column.x-1-4 {		
width: 25%;		
margin-right: 0;		
}		
}

Please add class instead if you want to customize column width. That custom CSS affects all 1/4 columns by default. On the class field of the column, add a class like: custom-1-4 instead. Then update that custom CSS to this:

@media screen and (min-width: 768px) {		
  .custom-1-4 {		
      width: 25%;			
   }		
}

Hope this helps.

#3

Hi there, that helps, but the margin is more than I desire, how do I reduce this?

#4

Hi there,

I did not see where you added the custom CSS class that my colleague mentioned. Would you please kindly give us a screenshot of the section you are talking about?

Thank you.

#5

Can you please also explain why the elements within the column are not where they are meant to be?

#6

That is correct, the CSS code is there, but where do you add the actual class? You should add it to a section in Cornerstone. I checked the Frontpage and it is not even using Cornerstone and it is using the Visual Composer.

Please give us a screenshot of the front end you think the margins are not right. And kindly be specific on the inquiries, I do not understand what you mean elements are not where they are meant to be. You need to give screenshots give enough information to us so we get the context of the issue.

Also, it will be helpful that you keep each question in a separate thread. That will help us to serve you better. for example, follow up the margin question here, but for the last question open up the new thread and give us info.

Thank you for your understanding.

#7

Hi,

I never said I was using cornerstone, I have only ever used VC, I don’t really understand what you mean with this line of inquiry…

The reason I asked that question here was because it only occurred when I added the above code to the custom CSS, so I would have thought this would be an appropriate place to ask, otherwise I will have to go through and explain the context again.

Please see the below image for clarification of both my questions;

In the backend the elements appear as the should:

In the front end they do not:

#8

Hi,

To fix it, you can add this in Theme Options > CSS

.mytable .x-column {
    margin-right:0 !important;
}

Hope that helps

#9

unfortunately that did not work. The buttons still appear beneath the rest of the elements in the row for some reason

#10

Hi there,

TRhank you for providing the screenshot. Now we know exactly what is the request. Regarding the margin between two content bands, you need to be aware that in 3/4 1/4 scenario the Renew stack uses 74% width and 4% margin. To change that you need to add a unique CSS class to the content band and change that setting. I did that for you, I clicked on the edit icon:

And added a class called lessmargin:

Then I clicked on the CSS icon in the top section of the VC and added the code below:

Now in the code, you will see I used the calc CSS function. That will help to calculate the width of the container minus the pixel rate I want. In this scenario I used 20px, you can change that to whatever pixel you want for the margin and the calc function.

Regarding the table you first need to make sure that you use 1/3 instead of 2/6 for the layout custom settings. Secondly you need to add the nomargin class to each of the columns and add the CSS code below:

.nomargin {margin-right: 0 !important;}

Thank you.

#11

Hi there,

Thanks for all the assitance, but it was getting a little too complicated, especially when the responsiveness was taken into account. I just realized if I apply padding to column it will acheive the results I was after.

Thanks again, and happy new year!

#12

Hey There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Happy New Year Too!!!

#13

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