how can I convert horizontal bars into responsive? - html

Question

I have a horizontal bar that has 4 items or maybe more. What I am trying to do is that when the browser is resized each item of the horizontal bar with its respective element, however, I am using twitter-bootstrap 4, but it doesn't seem to work either by default
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
.flex7-child-1 {
height: 40%;
position: relative;
}
.flex7-child-1:before {
content: '';
position: absolute;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
background-size: contain;
top: -60px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-2:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 88px;
left: -170px;
right: 0;
margin: 24px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-3:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-4:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 85px;
left: 170px;
right: 0;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child-5:before {
content: '';
position: absolute;
background-image: url(https://via.placeholder.com/50.png);
background-repeat: none;
background-position: center center;
background-size: contain;
top: 58px;
left: 166px;
right: -174px;
margin: 106px auto;
display: block;
width: 50px;
height: 50px;
}
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}
<div class="post-content-wrapper">
<div class="flex flex7">
<div class="child flex7-child flex7-child-1"></div>
<div class="child flex7-child flex7-child-2"></div>
<div class="child flex7-child flex7-child-3"></div>
<div class="child flex7-child flex7-child-4"></div>
<div class="child flex7-child flex7-child-5"></div>
</div>
</div>
before toggle
after toggle, I am expecting to have the same position even when I resize the layout without breaking the elements

Answer 1

Here's a better way to achieve responsive consistent styles for your horizontal bars. Note that individual styles for each .flex7-child-#:before has been removed, and all .flex7-child elements now use flexbox.
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex7 {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.flex {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
}
/* Pay attention to below */
.flex7-child {
display: flex;
flex-direction: row;
justify-content: center;
}
.flex7-child:before {
content: '';
position: relative;
background-image: url('https://via.placeholder.com/50.png');
background-repeat: none;
background-position: center center;
top: -70px;
background-size: contain;
display: block;
width: 50px;
height: 50px;
}
/* Pay attention to above */
.flex7-child {
width: 14%;
}
.child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
}
.flex7-child-1 {
height: 40%;
}
.flex7-child-2 {
height: 50%;
}
.flex7-child-3 {
height: 60%;
}
.flex7-child-4 {
height: 20%;
}
.flex7-child-5 {
height: 30%;
}

Answer 2

This isn't an exact example, but I would wrap your thumbnails and bars together something like this:
#container{
margin: auto;
width: 800px;
height: 400px;
border: 3px solid gainsboro;
border-radius: 5px;
display: flex;
justify-content: space-around;
}
.flex-item{
height: 100%;
display: flex;
flex-direction: column-reverse;
}
.flex-item > .bar{
border-radius: 5px;
width: 80px;
background-color: mediumpurple;
border: 1px solid blue;
margin-top: 10px;
}
.flex-item:after{
display: block;
content: '';
height: 80px;
width: 80px;
background-image: url("https://via.placeholder.com/80.png")
}
<div id="container">
<div class="flex-item">
<div class="bar" style="height:40%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:20%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:60%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:50%"></div>
</div>
<div class="flex-item">
<div class="bar" style="height:70%"></div>
</div>
</div>