Hide icon before text on overflow - html

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/

Answer 1

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/