shrinking set of buttons when minimizing page css - html - html

Question

I have a set of buttons in html:
<div class="controls">
<div id="s-controls">
<button class="control-btn" style="background-color: #2de7f6">1</button>
<button class="control-btn" style="background-color: #69a6ea">2</button>
<button class="control-btn" style="background-color: #736ace">3</button>
<button class="control-btn" style="background-color: #372ac3">4</button>
</div>
</div>
that I want to shrink when minimizing the page. Right now when doing that, the buttons mantain their size and the design looks messy.
I have tried many things with css but I am not really good at it. This is what I have so far:
.controls {
background-color: #1F1F1F;
min-height: 50px;
}
button {
margin: 20px auto;
max-width: 100%;
}
#s-controls, #p-controls {
text-align: center;
}
#s-controls > *, #p-controls > * {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
color: white;
cursor: pointer;
}
.control-btn {
display: inline-block;
/*border-radius: 4px;*/
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
line-height: 2.5em;
padding: 0 3em;
text-decoration: none;
}
line-height: 1.75em;
padding: 0 0.75em;
}
.control-btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
I intend to do this in pure html and css. The idea is to shrink the buttons at some point that they mantain the original one row design.
Any help would be appreciatted!

Answer 1

Try setting a width for the all of the containers (#s-controls, div.controls), and setting the actual width for the buttons, not just the max-width.
div.controls { width: 100%; }
#s-controls { width: 100%; }
button { width: 100%; max-width: 100%; }

Answer 2

Using media queries will give you the manipulation you are looking for at different devices and/or shrinking your browser.
Do this for all widths you are looking for and adjust the padding accordingly:
#media (max-width:991px){ //change this number to 768px, 560px, 480px, etc
.control-btn {
padding: 0 2em;
}
}

Answer 3

For different devices alignments you can use media query. For example for mobile width I have added button {width: 100% !important;} so that it will not collapse..
Please let me know if you are not looking for this
#media screen and (max-width: 480px) {
button {
padding: 0 2em !important;
}
}
controls {
background-color: #1F1F1F;
min-height: 50px;
}
button {
margin: 20px auto;
max-width: 100%;
}
#s-controls, #p-controls {
text-align: center;
}
#s-controls > *, #p-controls > * {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
color: white;
cursor: pointer;
}
.control-btn {
display: inline-block;
/*border-radius: 4px;*/
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
line-height: 2.5em;
padding: 0 3em;
text-decoration: none;
}
line-height: 1.75em;
padding: 0 0.75em;
}
.control-btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
<div class="controls">
<div id="s-controls">
<button class="control-btn" style="background-color: #2de7f6">1</button>
<button class="control-btn" style="background-color: #69a6ea">2</button>
<button class="control-btn" style="background-color: #736ace">3</button>
<button class="control-btn" style="background-color: #372ac3">4</button>
</div>
</div>
.

Answer 4

What you want is to add nowrap to the container for buttons:
#s-controls { white-space: nowrap; }
but you also need to define button width:
.control-btn {
max-width: 90px;
width: 24%;
}
You can play with those values to fine-tune them.
Also, you have an extra closing curly bracket in .control-btn that messes up the code. Delete it.
padding: 0 3em;
text-decoration: none;
/* } extra bracket */
line-height: 1.75em;
padding: 0 0.75em;
See it in the fiddle