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.
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:
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:
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:
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:
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;
- Open it in a new tab as shown on the image above;
- Copy its URL from a browser’s address bar;
- 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:
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:
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!