Center single employee on smaller screens

Hello!
I am using page builder to put my single employee on the left, and a call to action on the right of one row on my front page.

When viewed on my laptop, the employee is centred within the left column over top of the button linking to more detail. however, when on a medium screen/browser window (wider than the width of one widget but not full width), the photo does not remain centered but rather aligns left. however, the button below within the same widget stays centered in the box.

I have clicked the center (use for 1 or 2 employees) box and under design have said content should be aligned centered.

I’m new to web design so prefer if this can be fixed using the commands built into the theme rather than css, but if css is necessary (as it seems it may be from reading through the threads), is it the case that putting the code in the boxes provided in page builder (“Attributes”) will only work until the theme is updated? also, what goes in the “widget class” field? I am lost on concepts like child themes that people keep referring to in the forum. So new to it all!

Thanks!
S.

URL is growthcounsel.ca

Hello there,

Checking your site on my phone, it is perfectly centered as seen on the below screenshot. Have you been able to resolve it? Or, am I missing something?

Cloudup

Regards,
Kharis

Thanks Kharis.

If your phone automatically switches orientation when you turn it, try turning the phone sideways so the site is wider. It’s fine on small screens (one image only per row) and large screens (all images in row fit in one row) but medium screens the photo suddenly jumps left. You could also see it by reducing the size of your computer browser, which also reveals the problem.

Let me know if you can see it and have any suggestions.
Thank you!
S.

Hello there,

Please try to apply the following CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.roll-team .owl-item {
  float: none !important;
  margin-left: auto;
  margin-right: auto;
}

You might need to clear site cache (if applied) after adding the code.

Let me know how it goes.

Regards,
Kharis

Thanks, it worked perfectly!

two more questions on this topic:

  • I’d like to replace the photo for the employee but the one i have is not square. When i tried replacing the featured image on the employee section, the thumbnail on the main page cuts the top and bottom off the photo. i don’t really want to crop it. Can this be fixed?
  • when i mouse over the thumbnail on the main page, the box covers the picture and the name appears. The rest of the words (title) are there too but they are white and you only know they are there becuase you can see the white on the name and title below the picture. Is there a way to remove the extra lettering so it looks cleaner? (This may not be a problem if i can put a taller photo on as planned).
    Thanks again, Kharis!

To maintain your image dimension, make sure its size is less than 550px x 400px.

To hide the employee information inside the overlay box, you will need to add the following CSS code into Appearance > Customize > Additional CSS in dashboard.


.pop-overlay .team-info {
  display: none;
}

Regards,
Kharis

Thank you.
the code worked but removed all the text within the box. Also, the cursor becomes clickable but there is nothing to click. I would like to take one of two approaches:

  1. Remove the box altogether (preferred)
  2. have the box appear with only the name, not the position (so it all fits within the box)

Sorry to be a bother.

Hi Kharis,
Another issue now that the theme has updated - suddenly the photo is not centering and is moving to the right (instead of previously the left) depending on the size of the screen. again, only medium screens seem to be affected but now the photo gets cut in half as it shifts right. I’ve tried playing with the code you provided, as well as removing it but no luck.
Thanks for all your attention to this!
S.

I know it must be busy with the updated theme but would be very grateful if you have any thoughts on these last two points about my employee widget.
Thank you!
S.

Hello there,

I am so sorry for the long delay.

To remove the box overlay along with cursor pointer, add the following CSS code:


.roll-team .team-item .team-pop {
   display: none;  
}  

To fix the alignment issue, add this code:


.roll-team .owl-wrapper {
  max-width: 100% !important;
}

Regards,
Kharis

Thanks Kharis.
The box issue is fixed. Thank you.

on the centered employee (which is beside an call to action widget), I’m back to the situation where is hangs left on medium screens.

I have this at the moment:

.roll-team .owl-wrapper {
float: none !important;
margin-left: auto;
margin-right: auto;
max-width: 100% !important;
}

but have tried this:

.roll-team .owl-wrapper {
margin-left: auto;
margin-right: auto;
max-width: 100% !important;
}

this:

.roll-team .owl-wrapper {
float: none !important;
max-width: 100% !important;
}

this:

.roll-team .owl-wrapper {
float: none !important;
margin-left: auto;
margin-right: auto;
}

and this:

.roll-team .owl-wrapper {
max-width: 100% !important;
}

None seem to work in the new theme update. Hopefully there’s another solution.
thanks for everything!
S.

Hello there,

Please try this code and let me know how it goes.


.roll-team .owl-wrapper {
  max-width: 100% !important;
}

.roll-team.owl-carousel .owl-item {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

Regards,
Kharis

still shifts left. :frowning:
S.

Hello there,

Please check whether the group of custom CSS code where you put the last code I suggested is error free. You can check it with this tool.

Regards,
Kharis

it appears so, including the code you gave me:

W3C CSS Validator results for TextArea (CSS level 3)

Congratulations! No Error Found.
This document validates as CSS level 3 !

hmm…
S.

Hi,

Thank you for the followup. Please try this code:


.roll-team.owl-carousel .owl-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.roll-team.owl-carousel .owl-item {
  max-width: 100% !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


Regards,
Kharis

Yes, it said no errors.
S.

Does the last code work? Please confirm.

Regards,
Kharis

Yes! that worked!
Thank you!
S.