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 9 years, 6 months ago by Apollo87.

Hey Rikard, goodmorning from Japan!

Here’s the page in question; its a mock re-design of my front page:

http://www.thejetcoaster.com/home_mockup_B

As you can see in the first “Featured Content” section if you scroll past the splash art, I’ve got a Masonry blog element displaying a single post. The effect I’m trying to achieve is just like this site: http://www.tofugu.com/ with their “Latest Article” section. The “latest article” image box is short and wide, crops the image top and bottom and displays the title (and tag) in big bold letters across the image.

I was trying to do this with the Masonry element, but because I’m currently using it on my blog side bar at http://www.thejetcoaster.com/blog/ to display featured post types, I thought I should try to use a different element/shortcode. I THINK I can maybe target JUST that one masonry blog element on the home page, but I’m not sure how. That’s why I’m trying to use the post slider element.

If you scroll down a little further, you can see I’m using post slider elements for the other content sections like “podcast”, “latest posts” and “from the community”. I really want to be able to use the post slider element for these sections, but to have the titles, metadata and excerpt (or at LEAST the title) displayed INSIDE the image box, just like in the masonry blog element.

Thank you so very much for your wonderful assistance, Rikard. I’m really hopeful that you can show me how to do it with some css magic.

We found BBpress was causing too many glitches so we ended up going with a different forum software. Thanks for your help, and you can close the ticket!

We tried to remove the customizations, but even if we remove the custom css it still doesn’t work =/

Goodmorning from Japan:)

Okay, I have successfully updated the theme to 3.1.3!

However, the issue still persists…

Looking forward to your guidance on this issue!

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

Hey Yigit,

Sorry maybe i was being unclear. OK you see under “contributors” how there are currently 3 profiles but an obvious blank space on the right (this is because there are currently x3 1/4 team member boxes in the layout being used). I don’t have another member to fill in that area at this moment, so I want to center those 3 profiles ON THE PAGE, not in themselves. And if I only had 2, I would want them centered on the page, and not all the way on the left.

Does that make sense?

Hi Yigit,

I updated to v3.0.8 but the issue still remains!

Thank you very much! This works, however, one thing I noticed is that my columns are not centered in the middle of the page. The columns I’m referring to are the featured post, featured podcast and featured video on the front page of my site at http://www.thejetcoaster.com