Optimzation of the Employee Section

Hello,

You should use a custom CSS plugin.

Yes, you need to upload the same size.

Yeap, only three by default.

You need to change the post date in order to change the order.

This should center the services:

.service {
   display: inline-block;
   float: none;
}
.services-area {
   text-align: center;
}

Picking up on this;

I have say 4 services and 5 employees. The new rows are being filled from the left (float:left) which doesn’t look ideal.

When I use the css you posted, only two services/employees get put next to one another but valign of the divs seems to be center. Also, I’d like to leave the text within as is.

Could you advise me on the css to keep three per row valign top but get however many (less than 3) I have in the new row centered therein also valigned top?

margin: 0 auto !important; doesn’t seem to do it or perhaps I’m putting it in the wrong place or it’s not enough…

Thanks!

I missed adding this for vertical alignment in my previous answer:

.service {
   vertical-align: top;
}

The solution above was meant for only 2 employees.
display: inline-block; adds a bit of margin to the right, so you would need to remove it by adding a negative margin. Something like this:

.service {
   margin-right: -5px;
}

Change -5px to something else if it doesn’t work.
So use this with the code from my old answer and it should be fine.

hmm. Thank you, it almost worked. The employees are now 3:2 with the ones in the second row centered beautifully. The services are 3:1 while the one in the second row is still floating left. I tried many different margins but it’s not doing as I want. I now have margin -5px to be sure it’s not removed further from the left edge of the div than from the right.

This is the page: praxislandgraf.de, perhaps you can see what’s going wrong?

Thank you! Your support is always excellent.

aha, I seem to have to set text-align to center for the div to float to the center? I’ll just css select the .service-desc and move it back left. Odd back and forth though. Is there a more elegant way?

Thanks!

Nope, there isn’t a more elegant way, not that I know of anyway. But there isn’t anything hacky about it, it’s just one extra line so I wouldn’t worry about it.