Using CSS Media Queries for Custom Breakpoints

Hey I posted this before but got crickets. Just wondering…After reading through the forum, it looks like the last time it was mentioned was way back in October. Is there any word on this? I know I can add custom breakpoints once the site is published, but we will be hosting the site on another server, so I would rather try to get the breakpoints set up before hand in the Webflow environment and try to reduce the amount of a front end developer’s time later on.

Thanks!

MOD EDIT: Changed name to “Using CSS Media Queries for Custom Breakpoints”

1 Like

Hi @kbowman :smiley:

You can add custom breakpoints via the custom code area: Custom code in head and body tags | Webflow University

After exporting your site, the custom code will also be in the exported package as well :smile:

hope this helps

Thanks for the reply. I know the custom breakpoints via the code area will work once I upgrade my plan, I guess my question is, will the breakpoints be active in the Webflow workflow or will they only show up after export of the code?

Does that make sense?

Any code in the custom code area will only show in the published page.

Hmmm…I guess that is why I was hoping that Webflow will add a more modern breakpoint to the design editor. It would be nice to design that way and not have to wait to export and adjust in another workflow.

Hey @kbowman,

Which breakpoints are you struggling to design for when using the Webflow Designer?

It could be as simple as changing some of your workflows/positioning settings to get styles to respond down better at the 4 main break points. I used to think that I needed to add custom code, but I actually just needed to use positioning more effectively to get positioning correct through all breakpoints. :slight_smile:

Are there specific elements which you are struggling to get positioned at certain breakpoints? Please let me know. :smile:

Thank you,

Waldo

Hey Waldo,
So I am using whatever the default device settings are for Webflow, which it seems that desktop is somewhere around the 960 for the grid. When I create my designs in PS I usually start with a desktop artboard around 1440. While getting things to scale down / up proportionately can be addressed through percentage & padding, it would be nice to at least be able to change the default 4 devices to sizes so they could match the projects needs ( such as business requirements determined by the client on a project).

In other words, let’s say that the client I am working for has a business requirement that the desktop breakpoint is 1140 and I want to show my progress using Webflow’s preview mode. There is no way to show and adjust the content to meet that breakpoint, so what I show in preview mode might not look accurate since there is no way to adjust to a specific breakpoint within the current Webflow interface.

K.

This topic was automatically closed after 60 days. New replies are no longer allowed.