Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1275640

    Hi
    I am trying to have two rows of 2 (4 in total) social icons in the 1st footer column of my site.

    I followed the code given in other threads for the icons twitter, youtube, and LinkedIn but I cannot see where (what site) I can get the corresponding email icon. I have used the HTML I get for the email icon available in enfold but it doesn’t line up with the others.

    I would also like both rows to be closer together so that the 4 icons line up better with the content in the middle footer column.

    Perhaps there is a better way of doing this?

    I have given site access details in the Private content.

    Thanks for your help with this.

    Regards
    Tia
    .

    #1275701

    Hey Tia,

    Can you please put them in one widget and we will try to adjust it via CSS?

    Best regards,
    Victoria

    #1275771

    Hi Victoria
    I’ve done that now.
    I think part of the problem is that the email icon is not the same type as the others (from the same source) so behaves differently.

    Usually, I can find what I want at fontello or someplace like that but I can’t really see where the twitter, youtube and LinkedIn are coming from (in this code I got from another thread). This makes me think that I should take a different approach.

    I will await your advice.

    Many thanks
    Tia

    #1275902

    Hi Tia,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .sbox .avia-icon-list li {
      padding: 0px;
    }
    
    .sbox .avia-icon-list li span {
      line-height: 70px;
      padding-top: 5px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1276049

    Hi Victoria
    That didn’t work and I would rather not add to the theme files as I am not using a child theme.

    I tried a different approach by just adding the 4 icons in a horizontal line in the first footer column. This looks fine but I would like to add a little spacing between each icon and also align the content of the 3 footer columns better. Can you suggest what html I can add to each widget to align them to the top (evenly). I tried some divs and css but it ended up changing the width of page layouts elsewhere – so I rolled back.

    Thanks for your help, I’m nearly there!

    Regards

    Tia

    #1276149

    Hi Tia,

    Could you please attach a mockup of what you’re trying to achieve? SO that we know what you need exactly and can help you better.

    Best regards,
    Victoria

    #1276186

    Hi Victoria

    I attach a mock up in the private data.

    Essentially, a little better spacing between the 4 icons in column 1
    and also aligning the top of the content of the 3 columns to one another.

    Many thanks

    Tia

    • This reply was modified 3 years, 10 months ago by Tia.
    #1276912

    Hi
    Did you get a chance to look at my issue?
    Thanks
    Tia

    #1277327

    Hi Tia,

    We are sorry for the late reply!

    I added following code to bottom of Quick CSS field

    #footer #custom_html-15 {
        top: 15px;
    }
    
    #footer #custom_html-15 .av_font_icon {
        margin-right: 20px;
    }

    Then I decreased the font size of the icons to 30px from 40px and removed line break from 2nd footer area.

    Please review your website :)

    Best regards,
    Yigit

    #1277384

    Thanks for that Yigit, I really appreciate it.
    You can close this thread now.

    Kind regards
    Tia

    #1277389

    Hi Tia,

    You are welcome!
    Let us know if you have any other questions and enjoy the rest of your day! :)

    Best regards,
    Yigit

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘2 rows of 2 social icons in footer’ is closed to new replies.