title: CSS break media on content instead of screen size
body: <p>I was trying different solutions to use <code>@media</code> in <code>css</code> (or to be more precise, <code>sass</code>) and was thinking about the way we commonly use <code>@media</code>. The most common way, at least that I know and I see on blog posts, tutorials, etc.. Is to define some standard values and then we use them. For example:</p>
  <pre><code>$small: 420px;
  $medium: 768px;
  $large: 992px;
  $extra-large: 1200px;
  
  @media screen and (min-width: $medium) { ... }
  
  @media screen and (min-width: $large) { ... }
  </code></pre>
  <p>The problem I'm facing with this approach is that my menu doesn't fit well any of the predefined values. So when it break the media size, it gets a huge blank space, even thought there is still space to fit the menu. In this case I could break it at <code>780px</code> but the values are <em>768</em> or <em>992</em>.</p>
  <p>So my question is.. Is it okay to approach media queries this way and break the media based on content by defining the values manually?</p>
  <p>The menu would be <code>780px</code>, let's say that a grid that I display the company members would break at <code>820px</code> and <code>540px</code>. Each of them I would need to analyse it visually on the browser, measure and set the value manually.</p>
  <p>I would still use (if there's not a better way) the pre defined values for common elements on the page (if needed). There is <a href="https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/" rel="nofollow noreferrer">this article</a> that I like a lot (a little out of date but a good concept), it covers the screen size usage and how to group them. But it doesn't approach the issue I'm questioning here.</p>
  <p>Also, other big companies, like <a href="https://www.airbnb.com" rel="nofollow noreferrer">Airbnb</a>, <a href="https://www.spotify.com/" rel="nofollow noreferrer">Spotify</a>, <a href="https://github.com/" rel="nofollow noreferrer">Github</a> they use predefined values to break the <code>@media</code> content. All based on predefined values, not the content. Spotify is one example. The menu breaks too soon, even with enough space to keep the items before moving to aside off screen.</p>
  <p>--</p>
  <p>The only reason I can think of to keep using this method is because we, as end users, are so used to have a menu toggle on the top header that it doesn't matter if there is enough space to keep the inline text. Since we are used to the button to open the menu, we use this technique, hence the use of pre defined media values.</p>