I am having trouble with the full bio team member display on mobile devices. I would like to have the team member's name and title display on the grid not just when hovered over.
Also, it seems that when you click on the team member, the mobile display is not working. The display is very thin and there is no image. I am attaching a mobile screen shot.
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):
/* show title and meta before hover */
.team-member[data-style=bio_fullscreen] .team-meta h3,body .team-member[data-style=bio_fullscreen] .team-meta p {
opacity: 1 !important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
}
/* show image on mobile */
@media only screen and (max-width: 690px) {
.nectar_team_member_overlay .team_member_picture {
display: block !important;
}
}
That does work. However, may I ask further if it at all possible in the mobile view version, that the pop up on the team member displays with the photo on the top or even just a bio so the screen does not have a split view that scrolls?
Please remove these CSS or wrap them in a media query so it only works on desktop:
Click on Image to View Larger
Also if you wish to show only the title on mobile use below CSS:
@media only screen and (max-width: 690px) {
/* show title and meta before hover */ .team-member[data-style=bio_fullscreen] .team-meta h3,body .team-member[data-style=bio_fullscreen] .team-meta p {
opacity: 1 !important;
transform: translateY(0px) !important;
-webkit-transform: translateY(0px) !important;
}
}
Hello.
I am having trouble with the full bio team member display on mobile devices. I would like to have the team member's name and title display on the grid not just when hovered over.
Also, it seems that when you click on the team member, the mobile display is not working. The display is very thin and there is no image. I am attaching a mobile screen shot.
I would so appreciate your help!
Hey marketingAMSL,
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):
/* show title and meta before hover */ .team-member[data-style=bio_fullscreen] .team-meta h3,body .team-member[data-style=bio_fullscreen] .team-meta p { opacity: 1 !important; transform: translateY(0px) !important; -webkit-transform: translateY(0px) !important; } /* show image on mobile */ @media only screen and (max-width: 690px) { .nectar_team_member_overlay .team_member_picture { display: block !important; } }Thanks
ThemeNectar Support Team
That does work. However, may I ask further if it at all possible in the mobile view version, that the pop up on the team member displays with the photo on the top or even just a bio so the screen does not have a split view that scrolls?
You are very kind to help.
Also, the code you suggested displays the team member name on the full site and I would like it for only the mobile version of the site.
Hey Again,
Please remove these CSS or wrap them in a media query so it only works on desktop:
Also if you wish to show only the title on mobile use below CSS:
@media only screen and (max-width: 690px) { /* show title and meta before hover */ .team-member[data-style=bio_fullscreen] .team-meta h3,body .team-member[data-style=bio_fullscreen] .team-meta p { opacity: 1 !important; transform: translateY(0px) !important; -webkit-transform: translateY(0px) !important; } }ThemeNectar Support Team