Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1297334

    Add/Edit Social Service or Icon Links
    Below each Team Member you can add Icons that link to destinations like facebook page, twitter account etc.

    The theme places these icons on hover state on the image. Not great UI for mobile.

    The text displayed says BELOW each member. How do I get these icons to appear below each member as the text states?

    #1297701

    Hey reddishpinkmedia,

    The social media links are displayed below the image on mobile, as you can see here: https://kriesi.at/themes/enfold-2017/elements/team-member/. I’m not sure how you would like to change that behaviour?

    Best regards,
    Rikard

    #1326688

    Hello,
    sorry to revive this old corpse but this topic is quite related to the question I have.

    Is it possible to enable the “mobile” behavior of the social media links of the team element constantly?
    I would like to show the tiny Icons all the time below the image of the team member, independet of the actual screen size.

    Thanks in advance for any help on this and beste regards

    Heiko

    #1326749

    Hi Heiko,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) {
    .avia-team-member .team-social {
        border: none;
        opacity: 1;
        visibility: visible;
        top: 150px;
        background: #ddd;
    }
    
    img.avia_image_team {
        padding-bottom: 30px;
    }
    }

    Best regards,
    Rikard

    #1326784

    Hey Rikard,

    thank you for your quick reply. It did the trick somehow, the social media icons are visible constantly but the size is not like it would be on a mobile device.
    What I try to achieve is shown on this picture: https://kriesi.at/documentation/enfold/wp-content/uploads/sites/22/2017/02/Team-e1517899149995.png

    It’s actually a picture out of the enfold documentartion.

    Thank you for your time in advance and best regards,
    Heiko

    #1326859

    Hi,

    Try this instead:

    @media only screen and (min-width: 768px) {
    .avia-team-member .team-social {
        border: none;
        opacity: 1;
        visibility: visible;
        top: 150px;
        background: #ddd;
    }
    
    img.avia_image_team {
        padding-bottom: 30px;
    }
    .team-social a {
        height: 30px;
        line-height: 30px;
        width: 30px;
    }
    .team-social a:before {
        margin-left: -8px;
    }
    }

    Best regards,
    Rikard

    #1326872

    Hi Rikard,

    thank you for your help. Not exactly what I’ve wanted, but close enough.

    Absolutely great support!
    Again, thank you very much.

    Stay safe and best regards,
    Heiko

    #1326917

    Hi Heiko,

    Great, I’m glad that we could help. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.