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
2
Answers
This isn’t an exact example, but I would wrap your thumbnails and bars together something like this:
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.