Change team pics from round to rectangle

Illdy
1

Hi. Is there a way to change the pics on the team members section from oval to squares or, preferably, rectangles? Thanks.

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to reduce the radius by going to Appearance > Customize > Additional CSS and pasting it there.


/*Reduce image radius*/
#team .section-content .person .person-image img {
    border-radius: 20%;
}

Best Regards,
Support

3

Thank you for the fast reply.

I am wondering if I can change the shape from round to square. Square pictures would fit my needs better. Thanks!

4

Hi there

I need to see your live website, please provide url and i will take a look

5

Sure. I am using the team member section for a different purpose. I want to display book covers.

The website is highvaluetraining.com

Thanks so much

6

hey there

Please add this CSS in appearance - customize - additional CSS

#team .section-content .person .person-image img {
border-radius: 0%;
}

Thanks!
Colorlib Support Team

7

Ah, beautiful! Thank you.

Ok, so now I want to ask if there is a way to take it a step further because the book covers I want to display are rectangular.

There may be two possible solutions. You might be able to tell me how to do one of these.

First possibility: is there any way to change the proportions? It would be very cool if I could make it a portrait-orientated rectangle instead of a square.

Second possibility: can I scale the way the pic displays inside the square. In other words, if I have a rectangular book cover that I want to display inside of a square placeholder, I could scale it down so it fits in the square and displays the full cover.

Either of the above solutions would be awesome. If not, I can photoshop the covers into squares with whitespace around them. But if it could be done in the theme, that would be ultimate coolness. Thanks!

8

Hey there

Ouch, im so sorry to say but none of them is possible because images for team members are cut by the small squares of 125*125px images and they can not be resized differently without template customization :frowning:

9

Is there a way to mark this closed?

10

Yep, i will do this :slight_smile: