Change size of Team List image frames

cpercy517 · February 2016

Hi. I am creating a team page with images in portrait orientation (160x200). I am using the team list shortcode. I see the image frame is 380x300. Currently with my 160x200 images, the text on the right of each image is too far away because of the space remaining in the image frame. I would like the image frame to be 160x200 to bring the text closer. Can you help with this?

Thanks in advance.

Albert · February 2016

Hi,

please send us link to page where you got these images so we can have a look on it.

cpercy517 · February 2016

Do you mean for me to send you my site so that you can see how my team images are lining up with the bio text?

Thanks.

Albert · February 2016

Yes, that's what we mean exactly.

cpercy517 · February 2016

new.dulaneyvalley.com/meet-our-team

If there is no fix for this. Can you tell me how I might center the team members without having to use the circle option?

Thanks.

Albert · February 2016

Thanks. So to move text closer to the image, you need to use the following css:

.team_list .column {width: 16% !important;}
.team_list .one-second.column { width: 76 % !important; }

cpercy517 · February 2016

Thank you very much!

Albert · February 2016

You are welcome

cpercy517 · February 2016

Hi,

I have noticed that now and I am not sure it is just since adding the CSS, that my team images are tiny on the iphone and the text does not go full width on this device either. It seems that the device is only showing the images 16% and the text 76% but in a vertical layout so the image is tiny, the next line is the name and title and then next line is the bio but only covering 76% of the screen. Can you help me?

Thanks.

Albert · February 2016

Please show us on screenshot what you mean first.

cpercy517 · February 2016

How would I include the screenshot? I have the screenshot saved to my computer but I don't have a URL for it.

Thanks.

Albert · February 2016

With http://pasteboard.co/ for example.

cpercy517 · February 2016

http://pasteboard.co/1NlSSsIH.png

Albert · February 2016

Please use below css instead of what we gave you previously and then check:

@media only screen and (min-width: 768px){
    .team_list .column { width: 16% !important; }
    .team_list .one-second.column { width: 76 % !important; }
}

cpercy517 · February 2016

Now the Team List on the iphone looks good but my site on the computer screen is messed up. Here is all of the CSS I have on the Meet Our Team page.

@media only screen and (min-width: 768px){

.team_list .column { width: 16% !important; }

.team_list .one-second.column { width: 76 % !important; }

}

.team_list .bq_wrapper { display: none; }

.image_frame, .wp-caption { border: 0 !important; }

.image_frame .image_wrapper img:not(.ls-l) { transform: scaleY(1) !important; }

.image_frame, .wp-caption { border-width: 0px !important; }

Albert · February 2016

Maybe this one then?

@media only screen and (min-width: 768px){
    .team_list .one-fourth.column { width: 16% !important; }
    .team_list .one-second.column { width: 76 % !important; }
}

cpercy517 · February 2016

Hi! That definitely helped. Do you know how I might have the text on the computer screen (not iphone) cover a larger width?

Thanks!!

cpercy517 · February 2016

I have other text on the page, for example "Family Service Advisor" fancy header and a column of text at the bottom of the page, that cover the full width.

Thanks again for your help!

Albert · February 2016

All you can do is increase grid width under Theme Options > Global > General section. Except that, we do not have other suggestion.

cpercy517 · February 2016

Okay. Thanks for your help!

Albert · March 2016

You are welcome

Change size of Team List image frames

Comments