Streaming live at 10am (PST)

Why is a breakpoint called a "break" "point"?

But what is a breakpoint? Why is a breakpoint called a “break” “point”? A point at which something breaks? What are points, and how/why do we break them?

There is an amazing too called Google which can answer many of your questions. But for this I will save you a step. Beginner's guide to media queries - Learn web development | MDN or Breakpoint - Wikipedia

This still doesn’t answer my question.

When users resize a browser window things can break. Breakpoints are just a referenced to media queries that are triggered when the browser is resized. But seriously what happened to doing your own research?

1 Like

You’re assuming I did not research this. Nothing out there–including the link you sent–gave an answer to my question, which is seeking the logic/etymology of the term.
(Please, no more passive shaming. Either be patient and helpful or don’t respond at all.)

I’m going to be honest, your original questions comes off with a hint of a trollish attitude. When you ask unconstructive questions like “what are points and how to we break them?”, that will only get you unconstructive answers in return.

That being said the team at Webflow didn’t invent the term breakpoint and as Jeff mentioned a google search would have told you everything you needed.

If you search for “What are breakpoints in web design” on the front page of the results this definition.

In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience.

I’ll explain it in terms of responsive web design. Breakpoints are checks in the CSS code that you include in your CSS to set either minimum or maximum screen widths that that CSS should run with. Webflow uses specifically the “max-width:” breakpoint so as the video said it always works from the set resolution down. You can use these breakpoints to do a number of different things like, resize elements to better fit that screen, hide elements that won’t fit, change the menu from the class menu to a drop down version, tell smaller screens that their screen is to small to use this web app (like webflow does in the designer), and the list goes on and on and on.

How does this work? With Webflow let’s say you have 3 breakpoints.

  • Breakpoint 1 - Screens as wide as 3840 pixels
  • Breakpoint 2 - Screens as wide as 1920 pixels
  • Breakpoint 3 - Screens as wide as 1280 pixels

Because they use the “max-width:” breakpoint it would work like this:
Any screen that is wider then 3840px will use Breakpoint 1
Any screen below 3840px but over 1920px wide will use Breakpoint 1
Any screen below 1920px but over 1280px wide will use Breakpoint 2
Any screen below 1280px will use Breakpoint 3

So when your designing your website in Webflow to effectively utilize this you need to start designing while viewing the largest breakpoint, this insures all smaller breakpoints start off with the same settings as the largest (because until you click on a smaller breakpoint and edit something the breakpoint for that selector won’t exist yet). Then once your done designing your website to look great in the largest breakpoint, click on the second largest and reformat it look good there, and go break point by breakpoint one at a time, from largest to smallest, reformatting/changing elements that need adjusted to ensure each screen size looks good.

Once done publish and test on as many devices as possible, I’ve noticed iPhone Safari hate websites no matter what sometimes and tweaking might still be needed.

Hope this helps.

Correction: Anything over the default “Desktop” breakpoint in Webflow uses “min-width:” which insures larger screen sizes over the max breakpoint continue to work.

I appreciate the thorough response, and thank you for the insight that I originally sounded “trollish” with the way I asked my question. (Definitely not “trolling,” which I still don’t understand the finer nuances of what the hell “troll” truly means in this modern, tech context.) Yes, I got some unconstructive and “trollish” responses back. (Fuckin’ forums. I’m actually about to abandon Webflow now that they’ve outright told me they’re not going to be answering any more of my technical questions…“though we’d love to help with every design question we get, it’s outside our radar.” WTF? The quality of a company’s customer service is what I care about the most!)

If you were a genuine, numbskulled beginner and genuinely desired to know the etymology of a term (a “breakpoint”), for the sake of genuinely coming to a greater understanding of its logic of why those two specific words were chosen as the designated name for this thingy, how might you have worded the question–assuming you would even know how to ask it, unlike me?

Thanks Andrew