Vote count: 0
I want the content to shrink horizontally when the browser is resized.
It works perfectly if I assign display: flex
to jp-controls
. However I need to support IE9 so I can't use flex. How do I do the equivalent but with support for IE9?
What I want (but without using display: flex
, notice how no overflowing):
What it does currently:
Html:
CSS:
.jp-sleek {
z-index: 100;
width: 100%;
font-family: "Source Sans Pro", sans-serif;
}
.jp-sleek .jp-gui {
height: 42px;
background-color: #e5e5e5;
position: relative;
}
.fa {
font-size: 24px;
}
.jp-sleek .jp-gui .jp-controls {
height: 100%;
position: relative;
font-size: 24px;
white-space: nowrap;
}
.jp-sleek .jp-gui .jp-controls button {
color: #000;
padding: 0;
border: none;
background-color: transparent;
}
.jp-sleek .jp-gui .jp-controls > * {
margin-left: 5px;
margin-right: 5px;
display: inline-block;
height: 100%;
vertical-align: top;
}
.jp-sleek .jp-gui .jp-playback-rate-bar {
background-color: #a1c1f4;
cursor: pointer;
width: 60px;
min-width: 30px;
}
.jp-sleek .jp-gui .jp-playback-rate-bar .jp-playback-rate-bar-value {
background-color: #71a6fc;
height: 100%;
width: 14%;
}
.jp-sleek .jp-gui .jp-icon-controls button {
min-width: 42px;
}
.jp-sleek .jp-gui .jp-icon-controls .jp-progress {
background-color: #a1c1f4;
width: 100%;
min-width: 180px;
max-width: 500px;
font-size: 20px;
position: relative;
}
.jp-sleek .jp-gui .jp-title-container {
font-size: 12px;
vertical-align: top;
}
.jp-audio.jp-sleek .jp-gui .jp-title-container .jp-poster {
max-height: 100%;
}
img {
vertical-align: middle;
}
.jp-sleek .jp-gui .jp-title-container .jp-title {
font-weight: bold;
max-width: 135px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
asked 12 secs ago
Resize content on browser resize without flex
Aucun commentaire:
Enregistrer un commentaire