Social Media Icon Display and Positioning

Ask the community
,
1

Hi, I am new to corvid and to coding in general, so I hope this is a simple question. I am creating a dynamic page that will have a person’s biography. I want to include each persons’ preferred social media links (fb, instagram, linkedin, twitter) at the end of each page. In my database I have four columns for each social media channel which is connecting to a social media icon (which I created using the button element).

I used the show/hide code to show the social media icon only when the user has a social media account under the specific website. (see code below)

if (itemObj.hasOwnProperty("facebook")) {
            $w('#fb').show();
        } else {
            $w('#fb').hide();
        }

 if (itemObj.hasOwnProperty("linkedIn")) {
            $w('#lnkdn').show();
        } else {
            $w('#lnkdn').hide();
        }

 if (itemObj.hasOwnProperty("twitter")) {
            $w('#twr').show();
        } else {
            $w('#twr').hide();
        }

 if (itemObj.hasOwnProperty("instagram")) {
            $w('#insta').show();
        } else {
            $w('#insta').hide();
        }
    });

});

My problem now is with the positioning of the buttons. For example, if someone has only one the four social media links (see below - example of someone that has instagram account only), it would display in the middle of the page instead of in the left side of the page (which is where I want it to be).

1320×220 18.8 KB

This person has only all four account

1392×240 12.9 KB

This person has only one account

Any idea on how I can position these multiple buttons to always be on the left but without overlapping? Thank you in advance!

2

You can collapse function
… and I don’t think you can collapse elements horizontally in Wix

3

Did you ever figure this out? I’m trying to do the same. Thanks