Centering 3 columns in the middle

Hi there, please see:

I have tried to figure this out myself, but im coming up trumps.

Basically I want the 1st section under the slider it to look like this:

https://ledgerops.kinsta.cloud/wp-content/uploads/2020/01/home-v2.png

I have added this code:

@media screen and (max-width: 979px) {
.align-element {
text-align: center;
}
}
.align-element-02 {
  font-size: 19px;
}
.x-column {
 float: left;
    margin-left: 5%;
}
.align-element {
padding-top: 60px;
  padding-right: 100px;
}

But its shifting the whole column (and I assume the whole page if I added more) to the right. So the headline is not centered. (this would be perfect if I could apply it to one container or content band but I dont know how)

Also on a mobile view, that added padding to the right is effecting the view: (ie its shifting to the left instead of being centered:

So, basically, I dont want to mess with all columns in the theme, just certain ones. I need the headline centered. And the 3 columns centered within the page as per my mockup (If I just do a normal container, with 3 columns, its set to float left, with a bigger margin on the right)

Thanks.

I updated the code, and added a class…

But, on small mobile screens, it is not centered...or ipad

<img src="//tco-forum-uploads.s3.amazonaws.com/original/3X/8/2/824b25b846d80b794ec6fd69e61db7e29a4b400d.png" width="666" height="500">

<img src="//tco-forum-uploads.s3.amazonaws.com/original/3X/4/1/410c403bd20faf931cf2baa237758151e2ff299d.png" width="690" height="388">

How can I fix this?

Thanks.

Hi @logoglo,

There is a right margin added to the content band which might be causing the misalignment issue. Please try removing the margin on the content band and see if it fixes the issue.

Hope this helps.

Sorry, im not seeing it…

If there is, how do I get rid?

Without any of my code, it looks like this, see how its more to the left, I would love for it to be centered…

Hi @logoglo,

If you put a background-color to your 3 columns you’ll notice that they are all center and properly align to begin with.


I think your concern is the elements inside those columns. Which you can easily center by setting the Row’s or Column’s Text Align option to Center.



But since you’re using Visual Composer, you can add a pre-defined class center-text to the Content Band or to the Container or to each of the Column.

Cheers!

I needed it left aligne don the desktop…I have tweaked it, and I think I have it how I want it. Thanks.

You’re welcome @logoglo!
We’re glad we were able to help you out.

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