Responsive Snippet?

Echoing the point about Outer HTML variations that Sanford mentioned...

Writing dedicated CSS for the snippet ID and even including @media queries is not a guaranteed fix.

e.g. If the snippet is being used in an email that's 480px wide, you've styled it to go across 2 rows evenly. The snippet then gets added to a desktop landing page in a 480px box but the media query thinks there's 1080px width and the snippet doesn't display as intended.

Try the suggestions here to fix the styling for the specific email or landing page, but be mindful that things may change if your usage of the snippet changes. You may have to create another snippet and rewrite the styling if you want to use it elsewhere

Hi @Madison Lundquist, For LPs, you have to define class at snippet level. Then, add responsive CSS in template of that LP so that your icons will not distort.

For emails, you have to add inline style in snippet as some of email clients does not support internal CSS. Also, wrap this icons in one TD and add space in between by using '&nbsp' . 

Thanks,

Disha

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.

You must have a specific ID for your snippet. Add the required CSS in your template to make the snippet responsive using that ID.

It's really the same burden as making any HTML fragment responsive -- it's not gonna happen automatically. 

Snippets are additionally difficult because they only keep their layout if they're not placed within outer HTML that accommodates their particular local styles. It's impossible to create a snippet that will always look the same regardless of its parent HTML.

Also, pls remove your attachment it and paste the image inline (in the editor) instead. Not all Nation users can see attachments, which makes them very confusing!