Hide icon before text on overflow

Question

On my Website I have some tiles to show some content. Depending on screensize the number of tiles per line is changing. Each tile has a button with an icon and text inside.

My problem is that on some screensizes the button gets to small and therefore the text is displayed in a new line.

What I would like to do is to hide the icon in front of the text when the button gets to small to display both in one line. Is there any way to achieve that?

Example Code:

.container {
  display: flex;
  flex-wrap: wrap;
}

.tile {
  width: 50%;
}

@media screen and (min-width: 350px) {
  .tile {
    width: 33.3333%;
  }
}

@media screen and (min-width: 500px) {
  .tile {
    width: 25%;
  }
}

.tile_content {
  margin: 10px;
  background: grey;
}

button {
  width: 100%;
}

<div class="container">

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

</div>

https://jsfiddle.net/qafc1wd9/

You should revise your demo to actually show the problem without having to resize the screen. Also, "information" is a no-quantity term and therefore doesn't have the plural form "informations". — isherwood, Jun 30 '22 at 14:40
https://stackoverflow.com/questions/40012428/how-to-detect-css-flex-wrap-event — Laaouatni Anas, Jun 30 '22 at 14:43
I searched everywhere, but within CSS it can't be done (at least for now) so you need to manually add `display: none` with `@media` querys — Laaouatni Anas, Jun 30 '22 at 14:47
Please add css span{ width:100%; display:block;} so it will not overflow — DESHRAJ, Jun 30 '22 at 15:34
if you want button icon and text same line then add button{display: flex;} — DESHRAJ, Jun 30 '22 at 15:35

score 0 · Accepted Answer · answered Jul 01 '22 at 11:13

I found this article explaining how to do it: https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/

.container {
  display: flex;
  flex-wrap: wrap;
}

.tile {
  width: 50%;
}

@media screen and (min-width: 350px) {
  .tile {
    width: 33.3333%;
  }
}

@media screen and (min-width: 500px) {
  .tile {
    width: 25%;
  }
}

.tile_content {
  margin: 10px;
  background: grey;
}

button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  min-width: 0;
  max-width: 30px;
  width: calc((100% - 124px)*124);
}

<div class="container">

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

  <div class="tile">
    <div class="tile_content">
      <div>
        some content...
      </div>
      <div>
        <button>
          <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z" /></svg>
          <span>Informations</span>
        </button>
      </div>
    </div>
  </div>

</div>

https://jsfiddle.net/0uehno5L/

Hide icon before text on overflow

1 Answers1