How to make a div apper for smaller screen - css

Question

I am using flex to display pictures. For wide screen all works well but as for for smaller media sizes I would like to see div with the class "base" apper under pictures even when they are displayed in a second an third row. How could I implement this?
Take a look at it on Codepen
<div class="container">
<div class="bookshelf">
<div class="bookshelf-background">
<div class="base"></div>
</div>
<div class="bookshelf-images">
<ul class="container">
<li class="flex flex1">
<a href="#" class="img">
<div style="width: 250px">
<img src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-
600w-1112517635.jpg" style="width: 150px;">
</div>
</a>
</li>
<li class="flex flex1">
<a href="#" class="img">
<div style="width: 250px">
<img src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-
600w-1112517635.jpg" style="width: 150px;">
</div>
</a>
</li>
</ul>
</div>
</div>
</div>`

Answer 1

Can you please check with this code, hope it will resolve your query. First, we remove static "base" class div and add background in separate list item using pseudo-element.
.flex {
margin-bottom: 50px;
color: white;
font-size: 20px;
text-align: center;
position: relative;
}
.bookshelf-images .flex {
position: relative;
padding-bottom: 14px;
}
.bookshelf-images .flex:before {
content: "";
width: 100%;
height: 45px;
border-bottom: 9px solid fuchsia;
position: absolute;
left: 0;
bottom: 0;
background: #35091b;
}
.bookshelf-images .flex a{
position: relative;
}
.container {
max-width: 800px;
background: none;
margin-bottom: 0px;
text-align: center;
display: flex;
flex-wrap: wrap;
margin-top: -3px;
}
.container .bookshelf {
display: flex;
position: relative;
}
.container .bookshelf-images {
height: 100%;
}
.container .bookshelf-image {
height: 100%;
position: relative;
max-width: 100%;
display: flex;
}
li {
list-style-type: none;
}
ul {
margin-left: 0;
padding-left: 0;
}
.container .bookshelf-background {
position: absolute;
border: 0px solid #ff0000;
left: 0;
bottom: 45px;
width: 100%;
height: 42px;
}
.container .bookshelf-background .base {
width: 100%;
height: 100%;
border: 0px solid #fff000;
box-shadow: 0px 9px 1px fuchsia;
position: absolute;
background: #35091b;
}
<div class="container">
<div class="bookshelf">
<!-- <div class="bookshelf-background">
<div class="base"></div>
</div> -->
<div class="bookshelf-images">
<ul class="container">
<li class="flex flex1">
<a href="#" class="img">
<div style="width: 250px">
<img
src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-600w-1112517635.jpg"
style="width: 150px;"
/>
</div>
</a>
</li>
<li class="flex flex1">
<a href="#" class="img">
<div style="width: 250px">
<img
src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-600w-1112517635.jpg"
style="width: 150px;"
/>
</div>
</a>
</li>
<li class="flex flex1">
<a href="#" class="img">
<div style="width: 250px">
<img
src="https://image.shutterstock.com/image-illustration/amazing-word-pop-art-retro-600w-1112517635.jpg"
style="width: 150px;"
/>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>