I need to include 8 standard headshots of team members with names and job titles at the bottom of the home page.
I was wondering if there was a way to have my cake and eat it by getting an effect similar to the Fancy Box Fullwidth Parallax, but in some way carousel it, as obviously we can't fit 8 pictures side by side? I have put in 6 as an example.
I looked at the team member options but I think the fancy box is nicer... :)
Also I looked through the old comments and found some css snippets for moving the text to the bottom of the fancy boxes but maybe something changed in the theme (they were old) because it didn't work when I tried to add to the css. Could you suggest what might? Thank you!
Please could you look again regarding the second part of the query? I have implemented your suggestion but still can't get the text moved to the bottom of the photos in the carousel items.
"I looked through the old comments and found some css snippets for moving the text to the bottom of the fancy boxes but maybe something changed in the theme (they were old) because it didn't work when I tried to add to the css. Could you suggest what might?"
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
which, with some text editing, worked to fit the role type h5 on one line but the same thing does not seem to work for h3 :(
I am trying to ensure no name is more than 2 lines ie cut down the h3 in the nectar fancy box to font size 18 px on a line height of about 24. Something relating to @media only screen seems to be interfering.
Can you suggest what might work? Much appreciated as always.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
So the query perhaps wasn't clear enough. When the same css but with h3 instead of h5 is used, it does not alter the size of the h3 text in the fancy box (which is the person's name, in blue). That was what I was asking for help with. My apologies if I gave too much detail. You cut and pasted what I'd already put in - I was explaining that works for the person's job title but not for the name (h3 rather than h5).
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
If you look at the bottom of the screen there is a carousel of team members. Because one member has a long name I need to reduce the h3 size there to keep the name on two lines rather than three.
I need to include 8 standard headshots of team members with names and job titles at the bottom of the home page.
I was wondering if there was a way to have my cake and eat it by getting an effect similar to the Fancy Box Fullwidth Parallax, but in some way carousel it, as obviously we can't fit 8 pictures side by side? I have put in 6 as an example.
I looked at the team member options but I think the fancy box is nicer... :)
Also I looked through the old comments and found some css snippets for moving the text to the bottom of the fancy boxes but maybe something changed in the theme (they were old) because it didn't work when I tried to add to the css. Could you suggest what might? Thank you!
Hey Again,
There is a Carousel Page Element in which you can add Fancy Box Or any other Element. See screenshot : http://prntscr.com/jd6063 .
Be.st
ThemeNectar Support Team
Thank you Tahir - you are spot on as always!
Please could you look again regarding the second part of the query? I have implemented your suggestion but still can't get the text moved to the bottom of the photos in the carousel items.
"I looked through the old comments and found some css snippets for moving the text to the bottom of the fancy boxes but maybe something changed in the theme (they were old) because it didn't work when I tried to add to the css. Could you suggest what might?"
Best wishes, Imogen
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box .inner { transform: translateY(50% ) !important; }Thanks
ThemeNectar Support Team
That worked so nearly there now!
I am having difficulty altering the size of the team member and role type (one team member has a really long name and a really long role...). I tried
.nectar-fancy-box .inner h5, body h5 {
font-size: 14px;
line-height: 22px;
}
which, with some text editing, worked to fit the role type h5 on one line but the same thing does not seem to work for h3 :(
I am trying to ensure no name is more than 2 lines ie cut down the h3 in the nectar fancy box to font size 18 px on a line height of about 24. Something relating to @media only screen seems to be interfering.
Can you suggest what might work? Much appreciated as always.
Imogen
Hey Again, Hope you had a Great Weekend,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box .inner h5, body h5 { font-size: 14px !important; line-height: 22px !important; }
Thanks
ThemeNectar Support Team
So the query perhaps wasn't clear enough. When the same css but with h3 instead of h5 is used, it does not alter the size of the h3 text in the fancy box (which is the person's name, in blue). That was what I was asking for help with. My apologies if I gave too much detail. You cut and pasted what I'd already put in - I was explaining that works for the person's job title but not for the name (h3 rather than h5).
Thank you for any other suggestions you have?
Imogen
Please provide a live url so that i can write up the specific css .
Thanks
ThemeNectar Support Team
They have it working again now... thanks for your patience, Tahir.
Any news?
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box[data-style="default"] .inner h3 { font-size: 18px !important; line-height: 23px !important; }Thanks
ThemeNectar Support Team
Just uploaded that but no joy, doesn't seem to be behaving as wished.
Hey there,
Thanks for reaching in,
Please provide a URL so we can help with some targeted CSS,
Regards
Hi Andrew
I'm sorry you couldn't find the URL. It is https://mcdev.techability.ie
If you look at the bottom of the screen there is a carousel of team members. Because one member has a long name I need to reduce the h3 size there to keep the name on two lines rather than three.
Thank you for any help you can give.
Imogen
Hey there,
Thanks for reaching in,
Please use this CSS;
.nectar-fancy-box .inner h3 { font-size: 16px !important; line-height: 20px !important; }Hope this helps,
Regards