I really like the Team Member Meta Overlaid, Bio Modal and it works perfectly fine for desktop. My issue is with mobile, I'd like to have the meta overlaid at all times. I tried "Meta Overlaid" but it shortens the image and also removes the bio modal option. How can I force the meta while maintaining the option to have bio modal?
You could use CSS to alter the image column size within the team member modal, which would change the aspect ratio of the image. If you’re interested, here’s an example:
@media only screen and (min-width: 1000px) {
.nectar_team_member_overlay .team_member_details {
width: 40%;
}
.nectar_team_member_overlay .team_member_picture {
width: 60%;
}
}
Thanks for the suggestion Eilud, but that didn't do anything. I'm going to duplicate everything and make it only visible on mobile and use the "Meta Overlaid" for mobile. Only issue is that the images have an overlay by default until someone taps the image. How can I disable this overlay so that the images are bright and clear with the meta data?
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):
I really like the Team Member Meta Overlaid, Bio Modal and it works perfectly fine for desktop. My issue is with mobile, I'd like to have the meta overlaid at all times. I tried "Meta Overlaid" but it shortens the image and also removes the bio modal option. How can I force the meta while maintaining the option to have bio modal?
Hello,
You could use CSS to alter the image column size within the team member modal, which would change the aspect ratio of the image. If you’re interested, here’s an example:
@media only screen and (min-width: 1000px) { .nectar_team_member_overlay .team_member_details { width: 40%; } .nectar_team_member_overlay .team_member_picture { width: 60%; } }Thanks.
Thanks for the suggestion Eilud, but that didn't do anything. I'm going to duplicate everything and make it only visible on mobile and use the "Meta Overlaid" for mobile. Only issue is that the images have an overlay by default until someone taps the image. How can I disable this overlay so that the images are bright and clear with the meta data?
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):
.team-member[data-style=bio_fullscreen] .team-member-overlay, .team-member[data-style=meta_overlaid] .team-member-overlay { opacity: 0 !important; }Thanks
ThemeNectar Support Team
Thank you very much! That worked!