Skip to main content
kineticcreative123
kineticcreative123
Inspiring
October 23, 2017
Answered

Need social icons to float right and center when responsive

  • October 23, 2017
  • 1 reply
  • 3675 views

Hi,

I'm working on a footer and can't get the icons to float right then center when responsive. I tried float:right; but it's not working.

Very confused...

Thanks for any help.

dc advocacy - premier inc.

    This topic has been closed for replies.
    Correct answer osgood_

    Whoops. It's live now...


    I've added a response which is currently being moderated, not sure why it only contains some code. Hopefully you will see it shortly.

    (See post above, it's been added now).

    1 reply

    O
    osgood_
    Legend
    October 23, 2017

    Replace EVERYTHING in your footer.css stylesheet:

    <link rel="stylesheet" href="http://offers.premierinc.com/rs/381-NBB-525/images/footer.css">

    With:

    #footer {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    background-color: #666666;

    padding: 30px 60px;

    }

    @media screen and (max-width: 768px) {

    #footer {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    }

    }

    .social_icons {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    }

    @media screen and (max-width: 768px) {

    .social_icons {

    margin: 15px 0 0 0;

    }

    }

    .social_icons div {

    margin: 0 0 0 5px;

    }

    #logo {

    width: 216px;

    height: 46px;background:url(http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png);

    }

    #twiterr_icon {

    width: 35px;

    height: 35px;

    background:url(http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png);

    }

    #linkedin_icon {

    width: 35px;

    height: 35px;

    background:url(http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png);

    }

    #insta_icon {

    width: 35px;

    height: 35px;

    background:url(http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png);

    }

    #youtube_icon {

    width: 35px;

    height: 35px;

    background:url(http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png);

    }

    #fb_icon {

    width: 35px;

    height: 35px;

    background:url(http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png);

    }

    Then replace the below html code:

    <div id="content-container">



    <div id="footer">

    <div id="footer_bar"></div>

    <div id="logo"></div>

    <div id="twiterr_icon"></div>

    <div id="linkedin_icon"></div>

    <div id="insta_icon"></div>

    <div id="youtube_icon"></div>

    <div id="fb_icon"></div>


    </div>


    </div>

      

    With this html code:

    <div id="footer">

    <div id="logo"></div>

    <div class="social_icons">

    <div id="twiterr_icon"></div>

    <div id="linkedin_icon"></div>

    <div id="insta_icon"></div>

    <div id="youtube_icon"></div>

    <div id="fb_icon"></div>

    </div>

    <!-- end social_icons -->

    </div>

    kineticcreative123
    kineticcreative123Author
    Inspiring
    October 23, 2017

    Thanks osgood!
    Close. Sorry I might have misspoke. Can I get the icons to still be side by side and to float right? And have the logo float left like it was? They are all centering across the footer. See attachments. I think I can adjust the padding when they are stacked when responsive.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 30, 2017

    As an html email


    IMO, background images should not be used for links, icons or anything important. Some email clients don't display background images.  For that matter, many email clients don't display foreground images either.  But you can give foreground images a text alternative which is better than nothing.  You can't do that with backgrounds.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices