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
  • 3632 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.

    O
    osgood_
    Legend
    October 23, 2017

    It might help if you uploaded what you have done so far, because the images look nothing like the code I provided at the moment.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices