Snippet Download
Norine Wiltshire
Featured snippets come from web search listings. Google's automated systems determine whether a page would make a good featured snippet to highlight for a specific search request. Your feedback helps us improve our search algorithms and the quality of your search results.
Sometimes when asking a question or posting an answer related to HTML, CSS, and/or JavaScript, I've been told to create a minimal, complete, and verifiable example using Stack Snippets. How do I do that? The "Code" help in the editor doesn't say anything about it, and I don't see anything in the advanced editing help either.
Stack Snippets are an on-site tool similar to jsfiddle.net, codepen.io or plnkr.co. They're more limited than those tools, but they have the advantage of being on-site, so your code/markup is in your question (or answer), not just linked, and so it's accessible even if the off-site location isn't, and people don't have to go off-site to help you / get help from you.
Enter your HTML, CSS, and/or JavaScript, putting each (with no wrapper) in its labelled pane. Don't put a ... or ... tag around your html, ... tag around your JavaScript or ... tag around your CSS; that will be done for you. Just put them in the correct pane. (Note that putting non-body content in the HTML panel will produce invalid HTML in the snippet when run. It may mostly work, but at best it'll be misleading.)
If you need to show that preventDefault isn't preventing the default of following a link, see this question about how to do that (since Stack Snippets won't let you navigate to a different document or open a new window). (TL;DR - Use a link to a fragment identifier.)
When the snippet works, demonstrating what you're trying to show, and the code is properly and consistently formatted, click Save & insert into post to save it to the text of your post and close the snippet editor. (You can always reopen it later by clicking the edit the above snippet link under the snippet.)
If you are creating/editing a post from an environment that lacks the editor GUI (for example, when submitting posts via the API or mobile devices), it might be useful to know how to build a snippet manually.
HTML - The top-left pane. Only the body content goes here. When you run the snippet, it will be wrapped in markup including ... tags (regardless of whether it belongs in body or not).
JavaScript - The bottom-left pane. Your JavaScript goes here. When the snippet is rendered, this will be in a .. element at the end of the , after any HTML you've included.
If the library you want to use is listed in the dropdowns on the left, just pick it from the dropdown; the editor will insert a tag (or tags) in the HTML for that library. You can always edit or remove it later.
To include a library or stylesheet that isn't listed, you can use the Add an external library button and provide a URL; the editor will then automatically add either a or a tag for it in the HTML pane. Typically you'd source these from a CDN like
By default, an in-snippet console will be included, so that console.log and similar statements generate output to the result pane. This involves adding console-specific CSS and markup to your snippet, which in some relatively-rare cases may interfere with what you're trying to show. If you don't intend to use console.log and such, untick the box. If you do, though, it's very handy to have those results shown in the result pane rather than hidden away in the browser's console.
The console is limited to only the bottom of the result window. If your only output is to the console, you can force that area to fill the window by adding this CSS (sadly, there is no actual option for doing this):
By default, your code is run "as is" in the browser. But if you tick the Use BabelJS / ES2015 checkbox, your code will be transpiled using the in-browser version of Babel. This isn't needed much anymore as all major browsers support the vast majority of ES2015+, but you'd use it for a React snippet for example.
By default, when you insert your snippet in a post, it will show the content of the snippet. Often that's exactly what you want: to show your code. But if you're doing a snippet that's just a live example of code blocks you've already written, or demonstrating minor tweaks to a previous snippet, etc., you may not want it to take up that much space. If so, tick the Hide snippet by default checkbox.
About putting non-body content in the HTML pane: Beware that Stack Snippets literally just take when you put there and dump it out in their generated body tag. So for example, suppose your HTML panel content were this:
What the browser does with that is largely up to the browser, although the specification has some rules for handling invalid HTML. The result you get in Chromium browsers and Firefox as of this writing is:
It's nice to see them putting the attributes of the invalid nested body on the main body, but as far as I can tell that's not specified behavior. Note that the head elements were not put in head, and most head elements are meaningless when they are dumped out to body instead.
Here's my problem - we have a snippet that we use as a footer and it includes icons for our social media outlets; however, depending on the device it's being viewed on, those icons can be aligned differently and not look as nice. I was wondering if there was a responsive template; or someway I could make our snippet look better/best regardless of the device it's viewed on.
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.
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:
Thank you so much Dave. This really helps, and not being a true coding person, this was written in a language that was easy for me understand! I'll look into your suggestions and get back with any additional questions in the next week or so!
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!!
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 and just put the text inside that like you would a paragraph.
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.
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.
2) I've added the "align" attribute (align="...") to the table and to the (cells) inside the table. This is pretty much the same as the text-align and again a little "extra something" to help it render as you'd expect across devices. The "align" attribute adjusts everything inside the cell, whereas text-align addresses the inline elements (like text).
c80f0f1006