Hello. I love the way the Bio Modal images appear when a team member is clicked. However, the images in the modal are not aligned properly. The image looks good on some screen resolutions, but on larger screens, the bottom of the image gradually gets cut off more and more as the screen size increases. It seems like the image is top-aligned, when it should be center-aligned. How can I achieve this so that the images look centered on all screen sizes? Thank you.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar_team_member_overlay .team_member_image {
background-position: center center;
}
Hello. I love the way the Bio Modal images appear when a team member is clicked. However, the images in the modal are not aligned properly. The image looks good on some screen resolutions, but on larger screens, the bottom of the image gradually gets cut off more and more as the screen size increases. It seems like the image is top-aligned, when it should be center-aligned. How can I achieve this so that the images look centered on all screen sizes? Thank you.
Hi there,
Thanks for keeping in touch.
Please send in your admin login details so that we can check this out.
Thanks.
Hello again,
Thank you for getting back to us.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar_team_member_overlay .team_member_image { background-position: center center; }Try this and let me know how it goes.
Thanks,
This works perfectly. Thank you.