Cropped and uncentered images in teams section

[PoNG Center]

Hello,

The profile pictures on the teams section on the home page is being cropped at specific widths of the page. I would like for the images to maintain their full width at any length, and if it cannot fit all images, for it to display n-1 squares, until only 1 is displayed.

Also at each point of display, I would like for the images to be centered, rather than right-aligned.

Visual of the page here: https://imgur.com/a/QRYfPkP

Thank you!

• This topic was modified 4 years, 5 months ago by PoNG Center. Reason: Fixed link
• This topic was modified 4 years, 5 months ago by PoNG Center.

[themearile]

Hi PoNG Center

Thanks for contacting us. Don’t worry we are here to help you.

Please share your site URL so we can take a look and provide you a good solution.

Thanks

[PoNG Center]

Hello, the website is http://pong-center-dev.ucsd.edu/

[themearile]

Hi PoNG Center

If you want to display the team image in full size on the mobile device then please use the best-recommended team image size of 700*870px.

Let us know if it works.

Thanks

[PoNG Center]

Hello,

The issue doesn’t happen when it is on a mobile device, but in between PC and mobile device, like a tablet. Changing the dimensions of the photos did not help and still gave the same issue of right alignment and cropped image.

[themearile]

Hi PoNG Center

Ok please add the below CSS code in the Additional CSS box.

For this Go to Appearence >> Customize >> Additional css box.

@media screen and (min-width: 768px) and (max-width: 992px) {
	.team-mambers.vrsn-two .teammember-item .teammember-content {
		width: 100% !important;
	}
	.team-mambers.vrsn-two .teammember-item .teammember-content .ourteam-image img {
		width: 100%;
	}
}

Let us know if it works.

Thanks

• This reply was modified 4 years, 4 months ago by themearile.

[PoNG Center]

I altered the code a little bit by increasing the max-width to 1200 and now the head shots 100% width! Thank you 🙂

However, they are still right aligned as seen by the last picture in the visual of the page here: https://imgur.com/a/QRYfPkP

I appreciate the continued help!

[PoNG Center]

Hello,

I was wondering if there was an update to this inquiry!

Thank you 🙂

[themearile]

Hi PoNG Center

Ok, please add the below CSS code in the Additional CSS box.

@media (max-width: 768px){
.team-mambers.vrsn-two .teammember-item .teammember-content {
float: none !important;
margin: 0 auto !important;
}
}

Let us know if it works.

Thanks

[PoNG Center]

It works perfectly!

Thank you so much for your help 🙂

[Author]

Posts