Div not inline when window gets smaller? - html

Question

I'm having a small issue with a couple divs. I have it set up with 5 divs all different colors, when the window size is shrunk the divs drop down under each other one by one. Is there a way I can make the space between them shrinks with it so they but up closer?
Thanks again guys
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg02Off {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg03Off {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg04Off {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg05Off {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.center {
text-align: center;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bg01Off">
</div>
<div id="bg02" class="bg02Off">
</div>
<div id="bg03" class="bg03Off">
</div>
<div id="bg04" class="bg04Off">
</div>
<div id="bg05" class="bg05Off">
</div>
</div>

Answer 1

Change the container center to a flexbox with the following properties:
.center {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 4%
}
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bgOff {
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg01Off {
background-color: #80b3ff;
}
.bg02Off {
background-color: #afe9af;
}
.bg03Off {
background-color: #ffb380;
}
.bg04Off {
background-color: #ffaaaa;
}
.bg05Off {
background-color: #eeaaff;
}
.center {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 4%
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bgOff bg01Off">
</div>
<div id="bg02" class="bgOff bg02Off">
</div>
<div id="bg03" class="bgOff bg03Off">
</div>
<div id="bg04" class="bgOff bg04Off">
</div>
<div id="bg05" class="bgOff bg05Off">
</div>
</div>

Answer 2

Add a media query, so that after a certain width of screen the elements will get a margin-bottom that is a percentage instead of px.

Answer 3

Use media queries to make elements respond as the width of the viewport changes for example:
body {
background-color: lightgreen;
}
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
This would make the background color change when the width of the viewport goes below 500 px. You can use this same concept with the width of your divs.
** Also, check out Bootstrap. Bootstrap makes it easy to define widths of elements using a grid system. You are trying to make your site "RESPONSIVE" which is a well-known concept in web dev. Bootstrap has an already created library for this problem. It use media queries to do it. It is worth understanding media queries deeply, but for a quick fix, research bootstrap.

Answer 4

You could put a rule in a media query that reduces the margins like in my example (last rule):
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg02Off {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg03Off {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg04Off {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.bg05Off {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 4%;
margin-right: 4%;
display: inline-block;
}
.center {
text-align: center;
}
#media screen and (max-width: 760px) {
.bg01Off,
.bg02Off,
.bg03Off,
.bg04Off,
.bg05Off {
margin-left: 1%;
margin-right: 1%;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bg01Off">
</div>
<div id="bg02" class="bg02Off">
</div>
<div id="bg03" class="bg03Off">
</div>
<div id="bg04" class="bg04Off">
</div>
<div id="bg05" class="bg05Off">
</div>
</div>

Answer 5

You can use a table instead of the .center div, and give it the following styles:
table {
width: 100%;
text-align: center;
}
td {
width: 20%; /* This is 100/the number of <td>'s you have in the table. */
}
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg02Off {
background-color: #afe9af;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg03Off {
background-color: #ffb380;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg04Off {
background-color: #ffaaaa;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.bg05Off {
background-color: #eeaaff;
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
table {
width: 100%;
text-align: center;
}
td {
width: 20%;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<table>
<tr>
<td>
<div id="bg01" class="bg01Off">
</div>
</td>
<td>
<div id="bg02" class="bg02Off">
</div>
</td>
<td>
<div id="bg03" class="bg03Off">
</div>
</td>
<td>
<div id="bg04" class="bg04Off">
</div>
</td>
<td>
<div id="bg05" class="bg05Off">
</div>
</td>
</tr>
</table>

Answer 6

You can remove margin left & right and use flexbox on .center like this :
p {
margin: 0;
}
.pageColourOn {
border: 2px solid #e1dfe1;
border-radius: 5px;
background-color: #fff;
width: 100%;
height: 155px;
margin-top: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pageColourOff {
display: none;
}
#pageName {
background-color: #f5f0f5;
border-bottom: 2px solid #e1dfe1;
}
#pageName p {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
color: #565656;
font-weight: bold;
}
.bg01Off {
background-color: #80b3ff;
}
.bg02Off {
background-color: #afe9af;
}
.bg03Off {
background-color: #ffb380;
}
.bg04Off {
background-color: #ffaaaa;
}
.bg05Off {
background-color: #eeaaff;
}
.bg05Off, .bg04Off, .bg03Off, .bg02Off, .bg01Off {
width: 80px;
height: 80px;
border: 3px solid #666;
border-radius: 20px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.center {
display: flex;
justify-content: space-around;
}
<div class="pageColourOn" id="pageColour">
<div id="pageName">
<p>Colour</p>
</div>
<div class="center">
<div id="bg01" class="bg01Off">
</div>
<div id="bg02" class="bg02Off">
</div>
<div id="bg03" class="bg03Off">
</div>
<div id="bg04" class="bg04Off">
</div>
<div id="bg05" class="bg05Off">
</div>
</div>