Hey Madison, are you using this snippet in an email or landing page?
If it's for an email, it's a little bit more tricky to get it responsive than it would be for a landing page where you'd have more options. It looks like you've got all the social icons in the same row/cell and that they're wrapping to the next line b/c of the width restriction (padding left and right sides) on the footer. There's a good amount of room in between the icons, you might consider reducing that spacing to accommodate the 2 logos that break to the 2nd line. In this way, you'd take a "mobile-first" design approach and choose the spacing between the icons based on the mobile display. This'd mean they're closer together on the tablet/desktop but it'd be consistent across devices.
One thing you could think about for the icons would be setting them up in two groups of four in two cells/tables next to eachother so that for mobile they could stack atop eachother 4-atop-4 and for tablet/desktop they could be a row of 8. There's still some coding to be done there to get these to stack for mobile and be side-by-side for tablet/desktop, but breaking these up into 2 groups might make the stacking more graceful without having to reduce the spacing between the icons - technically this might be the easiest approach. From a user experience perspective, I try and think about things you'd click on mobile being "at least a fingertip big" (with spacing) -- there's nothing more frustrating than having a "fat fingers moment" as a user and not being able to click the link you're aiming at ... maybe it's just me tho 
To really be able to solve this for email, you'll probably need to share the code you're working with for your template and snippet -- there's a combination of things (CSS in the head, inline styles, parent/child HTML) at play with responsive stuff in email so the solutions are usually based on the specific context (template/framework) rather than being "one size fits all".
If this is for a landing page, it's a lot easier. You should be able to add some CSS into the "Custom HEAD HTML" input (in the "Edit Page Meta Tags" popup) to specifically target that element on mobile devices with a media query. This might look something like:
@media screen and (max-width:480px) {
#MySnippetFooterID { ...CSS here to style the icons/spacing/etc ... }
}If this is for a landing page, you could share a link to preview the page instead and it'd be easier to hand off some more specific CSS to help out here.
Hi there Dave - My snippet is currently just plain HTML code, no CSS. The code is below. I was able to put the icons into a table, which actually helped quite a bit, but I still can't get the text in the first paragraph to look good (see the screenshot below). Please let me know if you have a suggestion on some code I could add to make the text wrap responsively. Thanks in advance!!
<p style="text-align: center;"><span style="font-size: 12px; color: #5e5d5d; font-family: verdana, geneva;"><a style="color: #5e5d5d;" href="http://www.apqc.org">APQC</a> helps organizations work smarter, faster, and with greater confidence. It is the world’s foremost authority in benchmarking, best practices, process and performance improvement, and knowledge management.</span></p>
<table width="528" height="19" cellpadding="2" style="height: 72px; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: right;"> <a href="https://www.instagram.com/apqc_/" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/iconmonstr-instagram-13-240.png" alt="iconmonstr-instagram-13-240.png" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="http://www.linkedin.com/groups?gid=74711&trk=anetsrch_name&goback=Egdr_1271775615421_1" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/LinkedIn-Navy.png" alt="LinkedIn-Navy.png" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://www.youtube.com/user/APQC" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/Youtube-Navy.png" alt="Youtube-Navy.png" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://www.facebook.com/pages/APQC-American-Productivity-and-Quality-Center/57081210980" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/Facebook-Navy.png" alt="Facebook-Navy.png" height="30" width="30" constrain="true" imagepreview="false" /></a> </td>
<td style="text-align: left;"> <a href="https://twitter.com/APQC" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/Twitter-Navy.png" alt="Twitter-Navy.png" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://www.apqc.org/rss.xml" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/RSS-Navy.png" alt="RSS-Navy.png" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://www.google.com/maps/place/APQC/@29.7663501,-95.4628275,17z/data=!3m1!4b1!4m5!3m4!1s0x8640c14b0a36ffed:0x3bbc4d0562b03c54!8m2!3d29.7663455!4d-95.4606388" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/Map-Navy.png" alt="Map-Navy.png" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="http://www.apqc.org/blog" target="_blank" style="color: #333333;"><img src="http://pages.apqc.org/rs/159-OVJ-322/images/Blog- Navy.png" alt="Blog- Navy.png" height="30" width="30" constrain="true" imagepreview="false" /></a> </td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><span style="font-size: 12px; font-family: verdana, geneva; color: #5e5d5d;"><span style="font-size: 9pt;"><a style="color: #5e5d5d;" href="https://www.apqc.org/contact-us" target="_blank">Contact Us</a> | ©1994-2019 APQC. ALL RIGHTS RESERVED</span></span></p>
Hey Madison,
I'll need to tinker a bit with the HTML here, but I think the immediate issue you're seeing with the text running off the side of the page has to do with the width that's set on the table (width="528"). For most mobile screens you're looking at somewhere between 300 and 480px of width, so the excess is just spilling off the right side of the page.
You might try to change the width there from "528" to "100%" and giving that a whirl. There's a few other suggestions I'd make like moving everything inside the table and not using the paragraph tags (instead put the styles on the <td> and just put the text inside that like you would a paragraph.
I've included a cleaned up version of the existing code you shared below here for reference.
<p style="text-align: center;"><span style="font-size: 12px; color: #5e5d5d; font-family: verdana, geneva;"><a href="http://www.apqc.org" style="color: #5e5d5d;">APQC</a> helps organizations work smarter, faster, and with greater confidence. It is the world’s foremost authority in benchmarking, best practices, process and performance improvement, and knowledge management.</span></p>
<table cellpadding="2" style="height: 72px; margin-left: auto; margin-right: auto;" width="528">
<tbody>
<tr>
<td style="text-align: right;">
<a href="https://www.instagram.com/apqc_/" style="color: #333333;" target="_blank"><img alt="iconmonstr-instagram-13-240.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/iconmonstr-instagram-13-240.png" width="30"></a> <a href="http://www.linkedin.com/groups?gid=74711&trk=anetsrch_name&goback=Egdr_1271775615421_1" style="color: #333333;" target="_blank"><img alt="LinkedIn-Navy.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/LinkedIn-Navy.png" width="30"></a> <a href="https://www.youtube.com/user/APQC" style="color: #333333;" target="_blank"><img alt="Youtube-Navy.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/Youtube-Navy.png" width="30"></a> <a href="https://www.facebook.com/pages/APQC-American-Productivity-and-Quality-Center/57081210980" style="color: #333333;" target="_blank"><img alt="Facebook-Navy.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/Facebook-Navy.png" width="30"></a>
</td>
<td style="text-align: left;">
<a href="https://twitter.com/APQC" style="color: #333333;" target="_blank"><img alt="Twitter-Navy.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/Twitter-Navy.png" width="30"></a> <a href="https://www.apqc.org/rss.xml" style="color: #333333;" target="_blank"><img alt="RSS-Navy.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/RSS-Navy.png" width="30"></a> <a href="https://www.google.com/maps/place/APQC/@29.7663501,-95.4628275,17z/data=!3m1!4b1!4m5!3m4!1s0x8640c14b0a36ffed:0x3bbc4d0562b03c54!8m2!3d29.7663455!4d-95.4606388" style="color: #333333;" target="_blank"><img alt="Map-Navy.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/Map-Navy.png" width="30"></a> <a href="http://www.apqc.org/blog" style="color: #333333;" target="_blank"><img alt="Blog- Navy.png" height="30" src="http://pages.apqc.org/rs/159-OVJ-322/images/Blog-%20Navy.png" width="30"></a>
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><span style="font-size: 12px; font-family: verdana, geneva; color: #5e5d5d;"><span style="font-size: 9pt;"><a href="https://www.apqc.org/contact-us" style="color: #5e5d5d;" target="_blank">Contact Us</a> | ©1994-2019 APQC. ALL RIGHTS RESERVED</span></span></p>I'll have a pass at this later today or maybe this weekend and shoot to get you something back by Monday to test out - thanks for sharing the code here, it's helpful to get a sense of what's going on inside the snippet.
High five, and happy Friday
-Dave
Dave - I didn't know you could set a table width as a percentage (this is SO HELPFUL). I have done that and put everything in the table, and this seems to be far ahead of where I was this morning! It's a balancing act with the table width because if I make it too skinny, it looks on on the desktop. I think 90% may be a good one for now.
.png)