I design sites in Webflow every day, and I enjoy it. Still, 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. Working as a part of the outsource development company brings many challenging tasks :)
Recently I caught myself thinking about how many custom code snippets I use for Webflow development. 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.
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:
/* Disable Ligature for the entire website */
* {
font-variant-ligatures: none;
}
/* Disable Ligature for a specific selector */
.class-name {
font-variant-ligatures: none;
}
Learn more about ligatures issues described by Jason Tselentis, Associate Professor at Winthrop University’s Department of Design.
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:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Want to go deeper and prevent scale effect only on input click? Check article on dynamo6 as well.
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.
JavaScript:
// First we get the viewport height and multiply it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
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:
// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
CSS:
/*We apply these styles only from the tablet breakpoint, desktop doesn't require it*/
@media (max-width: 991px) {
.hero {
height: calc(var(--vh, 1vh) * 100);
}
}
/*We set the fixed height for mobile landscape because there is not enough height space for the one screen section*/
@media (max-width: 767px) {
.hero {
height: auto;
min-height: 500px;
}
}
/*And then again calculate the height for the hero section*/
@media (max-width: 479px) {
.hero {
height: calc(var(--vh, 1vh) * 100);
}
}
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 you 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.
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:
/*Reset apple form styles*/
input, textarea, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; border-radius: 0;
background-image: none;
}
Webflow has its own Open Graph Image URL field for each page.
To add Open Graph Image, you need to:
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:
<meta property="og:image" content="https://assets.website-files.com/your-link.jpg">
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:
// Prevent scrolling on click
$('.menu-btn').click(function (e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
});
/* Allow back page scrolling by clicking on the element with the necessary class name. If you have several close elements with the same action like a close button and cancel button, write classes by a comma.*/
$('.close-menu-btn, .menu-wrap').click(function (e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
See how this script works—all interactions except the script were made with Webflow built-in interactions 1.0.
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:
// close CTA section on the ESC button
document.body.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
document.querySelector('.modal__close').click();
}
});
Btw, note that .keypress() doesn't work on MacBook Pro with touch bar, so use .keydown() instead.
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:
/*Text Selection Color*/
::selection {
background: #173686; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #173686; /* Gecko Browsers */
}
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!
Let's discuss how Valor Software can help with your project's development needs!