Wondering if there is any CSS to make a change on the size of the picture on the "Team Member" settings, not talking about the displayed picture and its size but when you actually click through the team member profile - I have it setup as "Meta Below - Biomodal" - this works great, except the customer is complaining their "headshot" is too big on the Bio | Picture mode and would like it smaller ... (once click through) - is there any way via CSS to change this ? Below ist the code i used from another ticket, works a treat, just looking the additional one to "reduce image size" on Team member "click through"
/* turn off zoom on thumb */
.team-member[data-style="bio_fullscreen_alt"]:hover .team-member-image-inner { -webkit-transform: scale(1) !important; transform: scale(1) !important;
}
/* remove zoom on bio image */
.nectar_team_member_overlay .team_member_image { -webkit-transform: scale(1) !important; transform: scale(1) !important;
}
/* move name to first column */
.team-member .team-meta { display: flex; flex-direction: column-reverse;
}
/* center the text */
.nectar_team_member_overlay.open .team_member_details h2, .nectar_team_member_overlay.open .team_member_details .title { text-align: center;
}
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):
Hi team
Wondering if there is any CSS to make a change on the size of the picture on the "Team Member" settings, not talking about the displayed picture and its size but when you actually click through the team member profile - I have it setup as "Meta Below - Biomodal" - this works great, except the customer is complaining their "headshot" is too big on the Bio | Picture mode and would like it smaller ... (once click through) - is there any way via CSS to change this ? Below ist the code i used from another ticket, works a treat, just looking the additional one to "reduce image size" on Team member "click through"
/* turn off zoom on thumb */ .team-member[data-style="bio_fullscreen_alt"]:hover .team-member-image-inner { -webkit-transform: scale(1) !important; transform: scale(1) !important; } /* remove zoom on bio image */ .nectar_team_member_overlay .team_member_image { -webkit-transform: scale(1) !important; transform: scale(1) !important; } /* move name to first column */ .team-member .team-meta { display: flex; flex-direction: column-reverse; } /* center the text */ .nectar_team_member_overlay.open .team_member_details h2, .nectar_team_member_overlay.open .team_member_details .title { text-align: center; }Thanks again
Hey Again,
Please provide the page URL so we can write up what's possible.
Thanks.
ThemeNectar Support Team
Hey Again,
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_picture { height: 70% !important; width: 50%; position: fixed; right: 0; top: 200px !important; }Thanks.
ThemeNectar Support Team
Thank you, that worked great.
Many thanks