How can I center a column?

Support
#1

I have a section that contains a single row, which in turn contains a single column with some content in it:

section > row > column > headline + picture + paragraph + button

On mobile, this column occupies 100% of the available width. That’s good. But on larger screens, I’d like the column to occupy less than 100% of the available width, while still remaining centered.

I gave the column a class of “squeeze” and tried adding the following custom CSS:

@media (min-width: 481px) {
    .squeeze {
        margin-left: 300px;
        margin-right: 300px;
    }
}

But it does nothing. (Actually, it does add the left margin, but not the right margin…clearly, not what I want.) I also tried adding the class of “squeeze” to the row and section to see if that would make a difference. It didn’t.

I also tried this:

.squeeze {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

But that doesn’t work either.

I DO NOT want to solve the problem by simply adding three columns to the row and placing my content in the middle column. I tried that already, and it doesn’t give me the flexibility I need. Not only that, but the empty columns create odd vertical spacing on mobile.

#2

Try this :
Section > row > Column > Text-container > Your stuff

Column has a class : stuff
Text-container has a class : foo

.stuff {text-align:center;}
.foo {max-width:500px;text-align:left;margin:0 auto;}

You can also use flex :
.stuff {display:flex;justify-content:center;}
.foo {max-width:500px;}

Go learn flex display property with these awesome free training : http://geddski.teachable.com

#3

Thanks, but what do you mean by ‘text container’? I don’t see that as something I can add to a column. I’m building my layout in Cornerstone and using the available shortcodes

#4

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#5

figured it out on my own.

#6

Hi @brian.earl.oneill,

Happy to hear that. Feel free to ask us again.

Thanks.