Okay
  Public Ticket #1308650
2 column display of team members on mobile and tablet
Closed

Comments

  •  25
    damien started the conversation

    Hi,

    Loving your theme, its really easy to use and well designed!

    I just had a small display issue where im using the "bio Shown full Screen Modal" to display a grid of team members bio pictures.

    On desktop it looks ok as shows as rows of 6 columns. On Tablet and mobile however it immediately shows just 1 column photo which bis huuuugeee.
    How can I get it to show 2 or maybe 3 column display for tablet and mobile?
    Ive tried playing around with the column responsive settings without much success.


    Thanks

    Damien

  •  8,393
    Tahir replied

    Hey Again,

    Seems like you got it sorted : http://prntscr.com/gnwhaz . 

    Be.st


    ThemeNectar Support Team 

  •  25
    damien replied

    Hi Tahir,


    Yes, my apologies, I should have upda

  •  25
    damien replied

    Hi Tahir,


    Yes, my apologies, I should have updated this thread.

    The 1 thing I cant seem to fix is that on mobile/smaller displays there is a white gap between each CV photo. Any idea how to remove that?


    Thanks

    Damien

  •  25
    damien replied

    Hi,


    Ive also noticed another small issue with this particular team member module.

    When transparent header is activated and you click to view the team bio alongside the massive image to the right, it opens the new window and the top header area should really revert back to the solid (sticky nav) so it doesnt look weird.

    http://gateone.co.uk/meet-our-team/

    Also, is there anyway of making the full screen image 40-50% smaller? Its kinda huge when you click to view th bio and photo.


    Thanks
    Damien

  •  25
    damien replied

    Hi,


    Actually Ive kinda fudged this but the header nav issues and the grey background are still present.


    Thanks

    Damien

  •  2,719
    Andrew replied

    Hi Damien,

    Apologies for the late reply.

    1) For the space between the images on mobile, use this CSS to remove it:

    @media only screen and (max-width: 690px){
    body .vc_row-fluid .vc_col-sm-2[class*="vc_col-sm-"] {
        margin-left: 0%;
    }
    }
    

    Add it to salient \ general settings - css script related - custom css code.

    2) The header is a sticky and not transparent right now here https://gateone.co.uk/meet-our-team/.
    Could you clarify on what the exact issue is with the header and also the grey background please because the descriptions are a bit inconsistent. A screenshot of what you need moved or removed would greatly help.

    Thanks.

  •  25
    damien replied

    Hi Andrew,

    Thanks, that worked perfectly. Still learning CSS so really appreciate this help.

    For the bio page issue...its more that if you click on 1 of the bio pics to read their bio..the page that opens doesnt naturally have a top header image and as such the menu nav and grey background all look a little strange (until you scroll and the sticky nav activates) 

    See attachment.

    I would be better if on clicking a bio pic the sticky nav auto deploys.

    Is it possible too to remove the grey background on the bio large pic area?

    Thanks again for your help

    Cheers
    Damien

  •  2,719
    Andrew replied

    Hi again,

    Thank you for writing back to us.

    You can use the following code to hide the grey part and make the image full height:

    .nectar_team_member_overlay .team_member_image {
        height: 100% !important;
        top: 0 !important;
    }

    As for the navigation, however, I'm still seeing it on the top of the page, have you managed to solve this, by any chance?

    Hope this helps.

    Best regards.

  •  25
    damien replied

    Hi,

    Thanks Andrew. Yep, I was primarily trying to make the image on the right much smaller and not occupy the entire of the right part of the screen. I was doing this by manipulating the "height: 70%" and "width: 80%" values but it often left a grey background.

    Not to worry, I just think alot of people dont want to see their face so large lol.

    Thanks for your help

    cheers

    Damien