Employees not centering

Hi!
We would like to have a short descriptive paragraph for each employee. Since it’s not an option, I’ve decided to add some text underneath each picture. However I cannot get the text to align under the pictures. So I’ve resorted to display only one employee per line, then add text, and repeat. It’s ugly and nonfunctional, but it’s the best I found yet.
However the issue I’m facing right now is that I’m using the checkmark in the box that says "Center the employees? (use only if you have 1 or 2 employees). However they’re not centering but aligning with the column.
Look: http://germainmedia.ca/#whowr
Is there any way to fix that whole mess? A place to add a description under the pictures? Or fix it so it centers? Anything?

Hi,

How about you create a child theme and I can guide you through the process of overwriting the employees widget so you can add text for each employee? Shouldn’t take more than a few minutes and you can display them properly, in three columns.

Hi!
I’m ok with that, however I’m not trained in any of this, I’m copy-pasting code from HTML and CSS training websites and hoping it works, so it might take a bit longer than a few minutes.
Ideally we’d have 1 picture (1st employee) on the left with the mouseover giving the links (including LinkedIn if possible) with the descriptive text on the right, then the 2nd picture (2nd employee) on the right with text on the left, etc. If you know what I mean.
Please let me know how you want to proceed.

That’s not what I meant, thought you wanted to have the text part of the widget so you can display the employees in 3 columns. Anyway, what you’re asking is even easier and you need only a custom CSS plugin in which you’ll have to add this:


@media only screen and (min-width: 991px) {
#panel-220-0-0-4,
#panel-220-0-0-5,
#panel-220-0-0-8,
#panel-220-0-0-10,
#panel-220-0-0-11 {
    float: left;
}
#panel-220-0-0-7 {
    float: right;
}
#panel-220-0-0-4,
#panel-220-0-0-7,
#panel-220-0-0-10 {
    width: 40%;
}
#panel-220-0-0-5,
#panel-220-0-0-8,
#panel-220-0-0-11 {
    width: 60%;
}
#panel-220-0-0-6,
#panel-220-0-0-9 {
    padding-bottom: 30px;
}
}

Could you please explain in more detail? Where do I need to add this CSS code, and what is it calling? Is it calling a text module, the employees? And where do I need to input my pictures and text?

you need only a custom CSS plugin in which you’ll have to add this
This is all you need to do. Install a custom CSS plugin and add the code I gave you in the space it provides for adding code. You don't need to change the content you have now, it will target those specific widgets by their IDs.

Hi Vlad
It’s working however I’m wondering why there’s such a huge distance between picture and text for employees 1 and 3 (the ones who have the picture on the left). I can’t seem to figure out why…
germainmedia.ca

You can also add this:


.owl-carousel .owl-item {
    width: 100% !important;
}

Also, in the code I gave you before you can change 60 to 70 and 40 to 30 if you want.