Hey all,
As many of you know, one of Webflow’s most frustrating limitations is that you can’t add custom breakpoints. I, like many others I’ve seen in the forum, had issues with the iPad Pro size and similar sizes (large tablet, small desktop). I didn’t want to go back and re-style the entire site after several weeks of work, so I figured out an acceptable workaround (acceptable for my needs anyway), and I figured I’d share. I am by no means an expert, but I’ll do my best to explain things clearly.
Warning: This is a very clunky workaround and may not be recommended for beginners. The first question you should ask is: “Do I really neeeeed a custom breakpoint?” The answer may be no, and your life will be a lot easier for it. That said, if you’re hellbent on doing this, then read on…
A couple important notes:
This post assumes that your goal is to simply move the tablet breakpoint from 991px up to a higher value, such as 1024px for the iPad Pro. (In my case, I wanted to set my breakpoint at 1279px.) If instead you wanted to apply different styles from (for example) 992px to 1024px than you do at 991px and below, that would require a solution that would take this “no-code” software from “low-code” to “a-hell-of-a-lot-more-code”, so…I recommend avoiding that.
I recommend only going through this process AFTER you’re 100% satisfied with the design using the standard breakpoints. Editing/iterating on any of the affected elements/design/behavior after you’ve already gone through this process could be a pain.
You likely have two separate issues to address:
- Styles
- Interactions
I’ll address Interactions first. If you have any interactions which were set to trigger only on “Desktop and above”, and you code a custom breakpoint between the standard Tablet and Desktop sizes, then you’ll most likely have a problem, as the styles will apply to your custom breakpoint but the interaction will still be triggered anywhere between your custom breakpoint and 991px.
My workaround for this involves using styles, which will need to copied into your custom breakpoint afterwards, hence the reason to begin with interactions.
Interactions
Heads up, depending on the interactions that you implemented, this may or may not end up being a very tedious process. Also, the best way to approach this will highly depend on your specific interactions and HTML structure. I’ll do my best to provide a short overview, but this definitely will not apply to all situations.
The idea is to duplicate each element that animates on desktop but not tablet, and wrap each copy in a separate div. The div containing the animated element is visible on desktop but not tablet. The div containing the non-animated element is the opposite: hidden on desktop but visible on tablet.
For example, I had an interaction that was triggered by the “benefits-content-wrapper” element scrolling in view. I duplicated it, and put each copy in it’s own div. Note that the interaction is set to trigger only on one selected element, and NOT on every element with the class “benefits-content-wrapper”.
I called the div wrappers bp1279none and bp1279block ("at the breakpoint of 1279px, set display=none or display=block), but call them whatever you want. At the desktop (main) level, set one of the classes to display=none and one to display=block, and then at the standard 991px tablet breakpoint, switch them.
(Make sure that the div containing the interaction trigger has display=block on desktop and display=none on tablet!)
Desktop:
Tablet:
So, again, I duplicated the interaction trigger and all of it’s child elements (some of which were animated by the interaction), which works because the interaction was triggered by an element and not by a class.
If your interaction is triggered by a class, then you would have to duplicate and wrap some higher level element, and then (in the wrapper that is made visible at the tablet breakpoint – in my case bp1279block) duplicate the class that triggers the interaction and make sure the new class does not trigger an interaction (so that it retains all of the styling but doesn’t animate on the tablet breakpoint or lower).
Obviously, this can all get complicated quickly. (Sorry if this is confusing.)
Just remember that interactions can trigger only on a selected element or on an entire class, and that the rules that you define in an interaction can target either specific elements, child elements with a certain class, siblings with a certain class, etc. etc… I’m not going to go through every case. Just go really slowly as you’re doing this process, and TEST as you go so you can immediately identify and fix any issues related to this.
Side note: While this approach uses classes, I believe you could also do this with custom attributes and a little bit of javascript… but that’s a topic for another day.
Once you have finished going through every interaction that you want to trigger on desktop but not on your custom breakpoint (or lower), and once you have duplicated, wrapped, and TESTED the appropriate elements, then you can move on to the styles part…
Styles
For the styles, I basically copied ALL of the styles for Webflow’s standard tablet size (991px) and pasted them into my own media query, which in my case was 1279px and below. This obviously leads to redundancies in the CSS, and probably a miniscule hit to performance, but… whatever, it does the trick. Besides, since our goal is to move the breakpoint from 991px up to a higher threshold (i.e. to apply to iPad Pro), then ALL of the styles that you applied at the standard tablet breakpoint ARE strictly necessary at the higher breakpoint.
Here are the steps that I followed…
1. Publish your site
It doesn’t matter if you publish it to a test domain or a production domain. You just need Webflow to compile all of the back-end CSS so that you can access it from your browser.
2. Locate and open the CSS file that Webflow automatically generates
To do that, go to your published site and open your browser tools. Click on the “Network” tab, and select “CSS”. If you don’t see any files listed there, reload the page and they should appear. Locate the CSS file (not a font file…I believe it’s always the one that has the URL of your website listed under “Initiator”. Right click on that file and click “Open in new tab”.
(Note: Alternatively, you can locate the CSS file by right clicking on it in the tag of your HTML, which you can view in the “Elements” tab)
3. Find the 991px media query
With the CSS file/tab open, Ctrl+F and search search for this: @media screen and (max-width: 991px). In my case there were 3 results…I’m not 100% sure, but I’m guessing you will have 3 results as well. The first appears to be some standard Webflow styles. Disregard those.
The second is the CSS that makes the full menu disappear and replaces it with the hamburger icon on tablets. If you want that to occur at your custom breakpoint, you will need this code.
The third should be your own styles that you set at the 991px breakpoint. You should recognize these classes as the ones you named and styled yourself.
4. Copy the CSS that you want to apply to your custom breakpoint into your own media query
Do this in the custom code section in Webflow. If you need the styles to apply to multiple pages, you can do this in the site settings. In my case, I only needed it to apply to one page, so I did it in the page settings.
Copy this code into the head tag:
<style>
@media screen and (max-width: 1279px) and (min-width: 768px) {
/* Your CSS goes here */
}
</style>
Note that in the max-width I entered my custom breakpoint of 1279px. Replace this with whatever breakpoint you want.
For the min-width, I entered 768px, which is one pixel greater than Webflow’s standard “mobile landscape” breakpoint. Technically this is redundant, as all of this CSS is being copied from the 991px media query. You could enter 992px for min-width and this would still function properly.
Important: Don’t forget the min-width! If you only use max-width, and don’t bookend the query by also adding a min-width, these inline styles will override the styles for smaller screen sizes that you selected in the Webflow Designer.
(If, for whatever reason, you wanted to go through the pain of manually coding styles for your custom breakpoint and not let them apply to Webflow’s standard 991px tablet breakpoint, WHICH WE ALREADY AGREED AT THE TOP OF THIS POST IS A HORRIBLE IDEA, then you would have to set min-width to 992px and manually comb through and change the CSS in the custom code. Again, not recommended, but hey…you do you.)
After you’ve decided on your breakpoints and setup your custom media query (and hit “save” of course), go back to Webflow’s automatically generated CSS file from the previous step, and copy/paste everything from the 991px media query into your custom media query. Remember to also copy/paste the .w-nav[data-collapse="medium"] styles, if you want the hamburger menu to appear at your custom breakpoint.
Note that included in your copy/pasted CSS should be the tablet styles that hide the animated elements and show the non-animated elements, which was setup in the “Interactions” section of this post. Therefore, the interactions will work above your custom breakpoint, but will be hidden below the custom breakpoint and replaced with non-animated elements.
Save the code again.
5. Publish again
With your custom media query saved, publish your site once again, and then open it in your broswer. Now, when you resize, you should see your styles (and interactions) changing at your custom breakpoint!
In case you’re not aware, the DevTools in every browser make it easy to preview your website on a variety of screen sizes. Read more about that in this post here: Simulate different devices and screen sizes.
Note: After you’ve completed this process, if you need to make any additional changes, just go through step 1-5 again, copy/pasting ALL of relevant styles from the automatically generated CSS file into your custom media query. (This is the best way to ensure you don’t miss something by trying to manually update the custom code.)
And that’s all. I hope you find this helpful!
Here’s the read-only link to my site if you wanna take a look: Webflow - Whoa Dude
(The site looks a little funky in the designer, because I also use some custom code to ensure that certain “fixed” sections fit in the screen properly on desktop, and that only applies on the published site: https://whoa-dude.webflow.io)
