Webflow custom code snippets you would use. Episode 1

Mikhail Voloshin
May 20, 2019 · 5 min read
Image for post
Image for post

I design sites in Webflow every day and I actually really enjoy it. But sometimes, I stumble upon interesting corner cases that Webflow can’t handle by itself yet, so I have to hand code a little. And yes, I’m a designer who codes from time to time.

Recently I caught myself thinking about how many custom code snippets I use for Webflow development. And I figured out that I have a lot of useful ones to share. I’ve included a few tricks in this article — more to come! Follow our blog to stay updated on Webflow tips and code snippets in the future.

Removing font ligatures

In typography, Ligature binds two or more characters into one, which sometimes looks like an issue. Some Web browsers like Safari browser on both Mac OS X and iOS show standard ligatures by default.

Image for post
Image for post
The most popular example of font ligatures is a combination of the following letters: fi, fl, ff, ffi, and ffl.

If you have expanded or collapsed tracking (CSS: Letter-spacing) in the font you use, you will see that some letters are defined as one symbol:

Image for post
Image for post

I bet you’ll want to disable Ligatures — use the following custom CSS code for the entire website or just for a specific selector by a class name:

Check the live web example I’ve made in Webflow to see the difference.

Learn more about ligatures issues described by Jason Tselentis, Associate Professor at Winthrop University’s Department of Design.

Preventing scaling on mobile

Some browsers on mobile, especially Apple ones, tend to autoscale the viewport. Autoscale happens when you click on the Input or the Text area if your inputs have font-size less than 16px. It’s painful for users to fill in such form as it scales while you type and doesn’t scale back after a user stops typing.

To make all text elements on a page readable and legible without zooming, disable scaling by using this itty-bitty code snippet:

Image for post
Image for post

Want to go deeper and prevent scale effect only on input click? Check the article on dynamo6 as well.

Improving height behavior: 100VH on mobile

Another pretty known issue is an ugly jumpy effect when you use 100VH points on mobile devices. As mobile browsers have a top address bar as a part of the UI, some space of your section will be cut or layout will be re-rendered and re-adjust since the dimensions have changed. Which is bad for user experience.

This issue was mentioned so many times in different articles and forums, but I would like to mention one where I take the solution from. Here’s the magic you’ll create:

Image for post
Image for post

As you can see, social icons get cropped at the bottom, but we want to see them without scrolling. Check out how it looks on mobile.

Just use a small chunk of JS and CSS to fix this — put the code into the heading of a page using Script and Style tags respectively.


When you scroll down, the address bar is collapsing which updates the value of — vh and repaints the page so the user may experience a jump effect.

In case of fixed height for the mobile landscape breakpoint we don’t need the event listener as you can find in the original example:


On a side note, updating the value of — vh will trigger a repaint of the page and the user may experience a jump as a result. Because of this, I’m not advising to use this trick for every projector to replace all usage of the vh unit, but only when you need your users to have an exact viewport unit value.

Resetting Apple default form styles

It’s a common practice to keep all inputs, text-areas and selects under control and make them consistent across all devices so I use custom form style. To reset iOS default styles for the entire website, add the following CSS code at the end of the <head> tag in project settings:

Using Open Graph Image

Webflow has its own Open Graph Image URL field for each page.

To add Open Graph Image you need to:

  • Create an image with recommended dimensions — at least 1200px by 630px and with 1.91:1 aspect ratio;
  • Upload it to Webflow;
Image for post
Image for post
  • Open it in a new tab as shown on the image above;
  • Copy its URL from a browser’s address bar;
Image for post
Image for post
The Open Graph preview.
  • Paste the link to the Open Graph Image URL field for required page as shown on the image.

If you need to insert the same image throughout the site, add meta tag with a link to your open graph image to the Head section in Webflow project settings instead:

Preventing scroll when a pop-up is opened

By default, when you open a pop-up or menu and start scrolling, the main content will scroll too. You can’t fix that with native Webflow features, but it’s not a big deal to add a short script to prevent this:

See how this script works — all interactions except the script were made with Webflow built-in interactions 1.0.

Closing modal window on the ESC button

It’s time to improve the accessibility of modal dialogs too! Add an event listener that waits when the ESC button is pressed and then runs the same action as the .modal__closeclass:

Image for post
Image for post
Try it live on this example.

Btw, note that .keypress() doesn’t work on MacBook Pro with touch bar, so use .keydown() instead.

Customizing text selection color

Quite often you need to change text selection color to fit brand colors or just make a text selection eligible for seeing what you select. Use this script to customize that:

Image for post
Image for post

That’s it for the first episode. Follow us on the Web or subscribe to get more code snippets and tricks! Feel free to share custom scripts you use in the comment section below, or let us know if you are having any issues with Webflow and we will do our best to help you!

See you in the next episode!


We accelerate the idea-to-market process by building…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store