<div class="container">
<div class="global-widget">
<div class="box">
<img src="https://picsum.photos/200/300" alt="Placeholder Image 1">
<p>Your Text Here</p>
</div>
<div class="box">
<img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image 2">
<p>Your Text Here</p>
</div>
<div class="box">
<img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image 3">
<p>Your Text Here</p>
</div>
</div>
</div>
.container {
width: 500px;
}
.global-widget {
display: flex;
justify-content: space-around;
margin: 20px;
container-type: inline-size;
container-name: global-widget;
}
.box {
text-align: center;
margin: 10px;
}
.box img {
width: 100%;
max-width: 300px;
margin-bottom: 10px;
}
@container global-widget (width < 400px) {
.box img {
display: none
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.