Aligning Columns in the middle of container

[Pbalazs89]

Hi there,

I have a page here with a pricing table: http://consteach.ethermedia.hu/kurzusok/

I tried positioning it to the middle via margin:0 auto, but it does not seem to do the trick. What am I doing wrong?

Thanks!

[christian]

Hey @Pbalazs89,

Out of the box, columns are centered in our themes. You modified the right margin of column that is why it’s no longer centered. If you modify that, make sure you modify the column width also depending on the number of columns. The column width and margin must equal 100% in total. I won’t go into the details of that as it falls under general CSS development. If you wish to continue with your current setup, you either need to learn CSS or hire a third-party developer to fix your custom CSS.

What I would recommend though is you remove that right margin modification. You instead just modify the max-width of the Row. It would still use custom CSS but the setup is way much simpler. Here’s a sample code to be added in the Row’s Element CSS.

$el.x-container {
  max-width: 300px;
}

Hope that helps and thank you for understanding.

[Pbalazs89]

Thanks for the thorough explanation!

[Prasant]

You are most welcome.