Need social icons to float right and center when responsive

[kineticcreative123]

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.

[osgood_]

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]

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.

[osgood_]

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.

[kineticcreative123]

Whoops. It's live now...

[osgood_]

Ok, well you have not yet changed the html footer code as I mentioned in my post......

Change the below:

<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>

To this:

<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]

Thank you so much osgood. You probably saved my job

[kineticcreative123]

Hi osgood,

Now my boss wants what I came up with below above the footer we just worked on. Can you help me make this responsive again?

Promise no more questions for a couple of months:) If you could help me with this I won't bother you anymore. We are under a deadline and this is the last piece. Sorry for bugging you all the time. I have some down time coming up and I plan on taking some classes.

Thanks again for all your help.

dc advocacy - premier inc.

[osgood_]

Replace your code:

<div id="1content-container">

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/layer_0.png" id="layer_0">

<div id="yellow_bar">

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/ltfooter_bar.png" id="ltfooter_bar">

<div id="let___s_talk_">

Let's talk.
</div>

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/ltbutton.png" id="ltbutton">

<div id="contact_us">

CONTACT US
</div>

<div id="need_text">

need text.
</div>

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/triangle.png" id="triangle">

</div>

</div>

For this code:

<div class="yellow_bar_wrapper">

<div class="yellow_bar">

<div class="lets_talk">

<h2>Let's talk.</h2>

</div>

<!-- end lets_talk -->

<div class="need_text">

<p>need text.</p>

</div>

<!-- end need_text -->

<div class="contact_us">

<a href="#">CONTACT US</a>

</div>

<!-- end contact_us  -->

</div>

<!-- end yellow_bar -->

</div>

<!-- end yellow_bar_wrapper -->

Then replace ALL the css in the 'lets-talk-footer.css' file with the css below:

.yellow_bar_wrapper {

background-color: #FECB45;

}

.yellow_bar_wrapper img {

margin-left: 190px;

}

.yellow_bar {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

background-color: #FECB45;

font-family: RobotoSlab-Regular, Arial, Helvetica, sans-serif;

padding: 20px 60px;

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

background-repeat: no-repeat;

background-position: 150px 0;

}

.lets_talk h2 {

font-size: 45px;

color: #fff;

margin: 0;

padding: 0;

}

.need_text p {

font-family: Roboto-Regular, Arial, Helvetica, sans-serif;

margin: 0;

padding: 0 0 0 20px;

color: #fff;

font-size: 23px;

}

.contact_us  {

margin-left: auto;

}

.contact_us a {

font-family: Roboto-Regular, Arial, Helvetica, sans-serif;

font-size: 19px;

text-decoration: none;

color: #fff;

border: 2px solid #fff;

border-radius: 5px;

padding: 15px 20px;

display: inline-block;

}

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

.yellow_bar {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

background-position: center 0;

}

.contact_us  {

margin: 15px 0 0 0;

}

}

[kineticcreative123]

Thanks osgood! Sorry for the late response.

Do you have any words of wisdom for me as far as training? I signed up for a few classes on Udemy.com that i plan on taking. This whole responsive thing has me in knots. With a background as a graphic designer I'm a little intimidated.

Thanks again for all your work. Wish i had half the knowledge:)

[Nancy OShea]

Learn CSS Flexbox.

• A Complete Guide to Flexbox | CSS-Tricks
• CSS3 Flexible Box
• Using CSS Flexible Boxes - CSS | MDN

[osgood_]

kineticcreative123  wrote

Thanks osgood! Sorry for the late response.

Do you have any words of wisdom for me as far as training? I signed up for a few classes on Udemy.com that i plan on taking. This whole responsive thing has me in knots. With a background as a graphic designer I'm a little intimidated.

Thanks again for all your work. Wish i had half the knowledge:)

Words of wisdom from me are  -  I too have a graphic design background...........so if you really want to add another skill to your portfolio you can. It takes some time of course but to be honest learning html and css is not all that difficult. There are patterns in html and css coding that will emerge and are repeated which will allow you to do everything you will require..........after that you might want to add a server language to your skills like php and perhaps some javascript, both will open up a new world for you to build more advanced solutions.

In terms of todays techniques its become vastly confusing because younger developer are using solutions like html frameworks, ie Bootstrap, Foundation which I personally believe will kill your ability to progress beyond a painting by numbers workflow. Other frameworks, javascript, are also popular amongst the new breed of developer such as React, Angular and Node js to replace workflows such vanilla javascript and php.

Personally I think older techniques like jquery and php, which are proven and stable are solid plus easy to learn. Much of this new stuff is down to developers trying to distance themselves from amatures and keeping themsleves in demand when its not strictly necessary. Much is overkill for 99% of the websites you will encounter. Yes, if you are writting high end applications then React, Angular and Node js may be beneficial but that is a very small share of the market.

A thorough understanding of html and css should be your initial target. Then maybe investigate Bootstrap but don't make the fatal mistake of skipping the learning process in favour of a framework.

You can learn a lot by watching videos on youtube but do not watch anything that is more than  2 years old, it's most likely outdated.

Good luck with your learning, it won't happen overnight. Desire and a passion for what you are doing will certainly help.

[kineticcreative123]

Thanks man!

Yes trying my best to learn html5 and css. Lots of stuff:)

Thanks again for taking the time to help and these great words of wisdom. Videos are a great start.

Take care.

[kineticcreative123]

Hi osgood,

Again the footer code looks awesome. Outlook is driving me nuts rendering the footer. I figured out all issues but the footer logo and social icons aren't showing up. To get the hero image to show up in the email I used Bulletproof backgrounds. Since the footer images are set as backgrounds can I duplicate the bulletproof code for the social icons and logo as well?

This is the generated code for the hero image. Wondering if I can use this for the other images.

This is their code they gave me to place.

Add the following right after the opening <body> tag…|

<td background="http://offers.premierinc.com/rs/381-NBB-525/images/rsv-free.jpg" bgcolor="#7bceeb" width="600" height="500" valign="top">

  <!--[if gte mso 9]>

  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:500px;">

    <v:fill type="tile" src="http://offers.premierinc.com/rs/381-NBB-525/images/rsv-free.jpg" color="#7bceeb" />

    <v:textbox inset="0,0,0,0">

  <![endif]-->

  <div>

…and this right before the closing </body> tag.

  </div>

  <!--[if gte mso 9]>

    </v:textbox>

  </v:rect>

  <![endif]-->

</td>

Styles for button and logo:

#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);

}

[Nancy OShea]

Is this going to be used as an HTML email or a website?

[kineticcreative123]

As an html email

[Nancy OShea]

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.

[kineticcreative123]

Right Thanks Nancy. Some of the templates we have used have images that show up fine in the footer. I've tried inline styling with an image source still no luck similar to what works. I could use text links instead but I'm trying to keep our new site branding. There has to be a way to make them work.

I took care of the background hero background image by using bulletproof background. Just need to get the footer images to work the same way. Possibly with an image source instead of background image source.

[Nancy OShea]

I appreciate your desire to preserve branding but email is still little more than glorified text messaging.  My HTML emails are built with nested tables to keep things as simple as possible.  If you have a good logo and a clearly written, proofread message, your HTML email is 90% done.   The rest is just eye candy that some people will  never see.

Nancy

[osgood_]

kineticcreative123  wrote

Right Thanks Nancy. Some of the templates we have used have images that show up fine in the footer. I've tried inline styling with an image source still no luck similar to what works. I could use text links instead but I'm trying to keep our new site branding. There has to be a way to make them work.

I took care of the background hero background image by using bulletproof background. Just need to get the footer images to work the same way. Possibly with an image source instead of background image source.

I would avoid background images like the plague in html emails wherever you can and certainly you don't need to use them for your footer.

Its a long time since I produced any coding for responsive html email but the below code should work for your footer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>

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

.footer {

width: 100%!important;

}

.footer td {

display: block!important;

}

}

</style>

</head>

<body>

<!-- footer logo/social icons -->

<table class="footer" cellspacing="0" cellpadding="0" border="0" style="text-align: center; width: 600px;">

<tr>

<td style="background-color: #666666; padding: 25px 0 15px 0;">

<img src="http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png" alt="" />

</td>

<td style="background-color: #666666; padding: 25px 0 15px 0;">

<a href="https://twitter.com/PremierHA?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png" alt="" /></a>

<a href="https://www.linkedin.com/company/premier-inc"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png" alt="" /></a>

<a href="https://www.instagram.com/premierha/?hl=en"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png" alt="" /></a>

<a href="https://www.youtube.com/user/premieralliance"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png" alt="" /></a>

<a href="https://www.facebook.com/premierhealthcarealliance/"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png" alt="" /></a>

</td>

</tr>

</table>

<!-- footer logo/social icons -->

</body>

</html>

[Nancy OShea]

That's how I would handle it, too.

[kineticcreative123]

Thanks Nancy!

You both Rock!

[kineticcreative123]

Thanks man!

It worked great on most clients. Some icon spacing was lost in a few versions of outlook and outlook chrome and firefox versions. But at this point it works for me. As you both have said I guess they can't be perfect across the board.

Thanks again. Now I have a template I can use for future emails.

You both Rock!

[osgood_ · Accepted solution]

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).