Centering Team Member Containers on The Page

OK I’ve uploaded a couple photos to make it clearer.

This is what it looks like now

and this is what i’m trying to achieve

didn’t seem to work.

this is one part I didn’t understand from your reply:

“place an empty column element to center elements on desktop” >> what kind of empty column element? i can’t really place an empty element and still center the page which is why i made the topic in the first place. to restate the original issue:

i have x3 profiles that i want to keep at 1/4 size each. that means i have 3/4 page of content. i can make them all 1/3 of the page and they would naturally center, but i want to keep the size as 1/4 each and have them centered on the page.

i added all of the profiles into a color section with the section id “contributors”. from there i inputted the CSS as follows:

.page-id-2062 @media only screen and (max-width: 768px) {
#contributors .first { display: none !important; }}

I don’t know if I’m missing something in the code syntax, but I tried with dots before @media as well and a bunch of other combinations. i got the section to budge ONCE with one iteration, but even then the color section only moved slightly right and it wasn’t centered.

this is the section i am referring to: http://www.thejetcoaster.com/team/#contributors

I appreciate your efforts, Yigit.

I want to try to restate my problem more clearly. I apologize if I miscommunicated previously.

Regarding the “Team Member” content element, you can resize it to different sizes.

Some of these sizes match up to meet the page width quite nicely (for example, having two 1/2 width team member, three 1/3 width team members, etc.).

You can resize these boxes freely to fill any page you like (for example, if you have 4 team members, you can just use four 1/4 width boxes).

Alternatively, you can use empty boxes to center things (for example, if you have 2 team members and don’t want them to appear at 1/2-width size, you can put four 1/4-width boxes and leave the outer ones blank so the 2 profiles appear in the middle).

So far so good.

However, the size of these boxes is important to me, and I want the team member boxes themselves (not talking about the text, or titles, but the actual content element) to be centered on the page. For example, if I have only one team member in a given section, I don’t want to have to make their profile a full page width, but maybe 1/3 or a 1/4 page width box and have that small team member box be aligned center on the screen. Currently, it is automatically aligns left.

Here is a live link to that example.

Ideally I would want to do this:

To align this single profile center on the page, I would currently have to shrink it to 1/5-width and put two empty boxes on either side, or enlargen it to 1/3 and do the same thing.

Basically stated, I want the team member content element boxes to automatically align center on the page rather than left, regardless of size. Using empty content boxes is not always an option to kind of ‘trick’ the boxes to align center because sometimes I don’t want to change the team member box size.

Very sorry for the trouble. Thanks for all your help so far!

• This reply was modified 8 years, 11 months ago by Apollo87.