I'm trying to create a header with a progress bar at the top. I'm trying to make it responsive. I've tried reading up about it and tried a few solutions but no success. So my questions are:
- How do I get the progress bar to shrink with the screen? So far I've used tables to organize the elements in and I can wrap the table but the progress bar itself won't shrink.
- How do I right-align the progress bar so it shows on the right when full screen?
Here's my code:
.header-style {
background-color: #2A417B;
height: auto;
width: auto;
display: block;
}
.header-text {
color: white;
margin: 0em;
text-align: left;
font-size: 1.5em;
}
.header-style-logo {
background-color: #2A417B;
display: block;
position: relative;
text-align: left;
padding: 1em;
}
.table-wrap {
display: block;
}
.table-wrap td {
display: inline-block;
}
progress {
display: inline-block;
width: 50em;
height: 2em;
margin: 1em;
/* IE settings */
color: #8FC23F;
background-color: white;
border: none;
}
/* Chrome settings */
progress::-webkit-progress-bar {
background: white;
}
progress::-webkit-progress-value {
background: #8FC23F;
}
/* Firefox settings */
progress::-moz-progress-bar {
background: white;
}<header class="header-style">
<table class="table-wrap">
<tr>
<td><img class="header-style-logo" src="logo_white.png" width="111" height="72" /></td>
<td>
<h1 class="header-text"> My heading</h1>
</td>
<td> <progress value="5" max="100"></progress></td>
</tr>
</table>
</header>