I have this portion in a website wherein there are buttons that looks like a grid, but they are just aligned by the usual css. It also only has 1 div which serves as its container. Is it possible to make the buttons responsive so that when the window is scaled larger or smaller, the buttons will still be in place? Thanks!
HTML
<div class="middle">
<center>
<br>
<br>
<button type="button3" class="button3">
<a href="301.html">301</a>
</button>
<button type="button3" class="button3">
<a href="305.html">305</a>
</button>
<button type="button3" class="button3">
<a href="308.html">308</a>
</button>
<br>
<button type="button3" class="button3">
<a href="303.html">303</a>
</button>
<button type="button3" class="button3">
<a href="306.html">306</a>
</button>
<button type="button3" class="button3">
<a href="309.html">309</a>
</button>
<br>
<button type="button3" class="button3">
<a href="304.html">304</a>
</button>
<button type="button3" class="button3">
<a href="307.html">307</a>
</button>
<button type="button3" class="button3">
<a href="310.html">310</a>
</button>
<br>
<button type="button3" class="button3">
<a href="311.html">311</a>
</button>
<button type="button3" class="button3">
<a href="312.html">312</a>
</button>
</center>
</div>
CSS
.button {
height: 40px;
width: 130px;
margin-bottom: 3%;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
border-color: #ffffff;
}
.button:hover {
background-color: #474240;
font-family: 'Muli', sans-serif;
}
.button1 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:5px;
}
.button1:hover {
background-color: #474240;
}
.button3 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:10px;
}
.button3:hover {
background-color: #474240;
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…