Okay
  Public Ticket #2409653
Team Member - Full Bio Shown
Closed

Comments

  • Colja started the conversation
    May 20, 2020 at 12:53am

    Hi there,

    I use the team member bio shown fullscreen style but it is not scrollable if there is more text. I have found some css code to this topic in other tickets but it didn't solve the problem.

    I also want to show the bio image below the text on moblie devices.


    Following code have I found but didn't realy solve the problems:

    .full-width-content .vc_span4 .team-member[data-style="meta_overlaid"] .team-member-image, .full-width-content .vc_col-sm-4 .team-member[data-style="meta_overlaid"] .team-member-image, .full-width-content .vc_span4 .team-member[data-style="meta_overlaid_alt"] .team-member-image, .full-width-content .vc_col-sm-4 .team-member[data-style="meta_overlaid_alt"] .team-member-image {
        height: 500px !important;
    }

    .team-member[data-style="meta_overlaid_alt"] .team-member-image, .in-container .vc_col-sm-4 .team-member[data-style="meta_overlaid_alt"] .team-member-image {
        height: 200px !important;
    }

    @media only screen and (max-width: 690px) {
        .nectar_team_member_overlay {
            overflow-y: scroll;
        }
        .nectar_team_member_overlay .team_member_details {
            top: 0!important;
            transform: none !important;
        }
    }

    @media only screen and (max-width: 690px) {
        .nectar_team_member_overlay .team_member_details {
            width: 50%;
        }
        .nectar_team_member_overlay .team_member_picture {
            display: block !important;
        }
    }

    Any help would be great!

    Thanks!
    Manja

  •  8,884
    Tahir replied
    May 20, 2020 at 9:55pm

    Hey Again,

    Please provide the page url so that i can write up the custom css for whats possible.

    Thanks

    ThemeNectar Support Team 

  •   Colja replied privately
  •  8,884
    Tahir replied
    May 22, 2020 at 10:23am

    Please update to Salient Theme Version 12.1.0 and Salient WPBakery Page Builder 6.2 . 

    To get a list of Bug Fixes and new Feature addons in the Latest Theme update,  the changelog can be viewed here : http://themenectar.com/changelogs/salient.html .

    Update the theme by following this guide: http://themenectar.com/docs/salient/important-salient-update-for-new-envato-requirements/ and http://themenectar.com/docs/salient/updating-salient/

    Best.

    ThemeNectar Support Team 

  • Colja replied
    May 24, 2020 at 11:08am

    Hi Tahir,

    updates are done. And I deleted "my" css:

    @media only screen and (max-width: 690px) {     .nectar_team_member_overlay {         overflow-y: scroll;     }     .nectar_team_member_overlay .team_member_details {         top: 0!important;         transform: none !important;     } }

    @media only screen and (max-width: 690px) {     .nectar_team_member_overlay .team_member_details {         width: 50%;     }     .nectar_team_member_overlay .team_member_picture {         display: block !important;     } }

    But its still not working (scrolling and the image below text on mobile devices). What can I do?

    Thanks and regards

    Manja

  •  8,884
    Tahir replied
    May 25, 2020 at 3:08am

    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):

    @media only screen and (max-width: 690px) {
    .nectar_team_member_overlay .team_member_picture {
        display: block;
        position: relative;
        top: auto !important;
        width: 100%;
        min-height: 100vh !important;
    }
    .nectar_team_member_overlay .inner-wrap {
        display: flex;  
        flex-direction:column;
    }
}

    Thanks

    ThemeNectar Support Team 

  • Colja replied
    May 25, 2020 at 9:22pm

    Hey Tahir,

    thanks – it almost works. On mobile devices the image is nearly below the text but not at the end and some text is behind the image. Do you have an idea?

    Thanks

    Manja

  •  8,884
    Tahir replied
    May 26, 2020 at 1:47am

    Hey Again,

    Can you provide a screenshot of the issue as i can't seem to recreate it on my end in Chrome Mobile Emulation Mode? 

    Thanks 

    ThemeNectar Support Team 

  • Colja replied
    May 29, 2020 at 5:46pm

    Hello Tahir,

    please find some screenshots attached: Firefox and Safari on an iphone.

    Thanks

    Manja



  •  8,884
    Tahir replied
    May 30, 2020 at 4:34am

    Escalating this to the developer so he can check on an atucal device and add in a response. 

    Thanks 

    ThemeNectar Support Team 

  •   Colja replied privately
  •  8,884
    Tahir replied
    June 9, 2020 at 2:22am

    Hey Again,

    This is still assigned to the Developer. Though gonna add more priority to it.

    Thanks

    ThemeNectar Support Team 

  •  1,079
    ThemeNectar replied
    June 9, 2020 at 2:12pm

    Hey Colja, thank you for your patience with this ticket.

    Adding this in to your custom CSS box as well should correct the issue shown in your screenshots:

    .using-mobile-browser .nectar_team_member_overlay .team_member_details {
    height: auto!important;
}
  • Colja replied
    June 10, 2020 at 9:22am

    Hey,

    perfect! Thank you!