Issue
.card {
max-width: 800px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-left: auto;
margin-right: auto;
text-align: center;
padding :8px;
}
.sectitle {
color: blue;
font-size: 22px;
font-weight:700;
text-transform: uppercase;
}
.seccontents {
color: black;
font-size: 19px;
text-align: justify;
}
.seccontentscenter {
color: black;
text-align: center;
font-weight:600;
}
.eg_img {
width: 200px;
height: 200px;
content: url(https://picsum.photos/200);
object-fit: contain;
display: inline-block;
}
.caption {
display: inline-block;
font-size:16px
}
.contain200 {
width: 200px;
padding-bottom: 5px;
display: inline-block;
}
.containMAX {
width: 100%;
display: inline-block;
}
@media all and (max-width: 800px) {
div > div {
width: 100% !important;
}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="card">
<div class="sectitle">section heading</div>
<div class="seccontentscenter">
<div class="containMAX">
<div style="float: left; width: 33.33%;"><br>
<div class="contain200">
<div class="eg_img"></div>
<span class="caption">CAPTION 1-1<br>CAPTION 1-2</span>
</div>
</div>
<div style="float: left; width: 33.33%;"><br>
<div class="contain200">
<div class="eg_img"></div>
<span class="caption">CAPTION 2-1<br>CAPTION 2-2</span>
</div>
</div>
<div style="float: left; width: 33.33%;"><br>
<div class="contain200">
<div class="eg_img"></div>
<span class="caption">CAPTION 3-1<br>CAPTION 3-2</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>I'm trying to resize 3 equally sized Div containing image and caption below it when screen size is smaller than 800px.
E.g. When screen size > 800px:
Div1 Div2 Div3
When screen size <= 800px:
Div1
Div2
Div3
However this arrangement is not wanted: When screen size <= 800px:
Div1 Div2
Div3
Please note that the position of the Div irregardless of screen size must always be centered.
Hope you all can help shade some light on this.
Very much appreciated and thank you all!
Solution
One way would be to switch between flex and grid
.container {
display: flex;
justify-content: center;
text-align: center;
}
@media screen and (max-width: 400px) {
.container {
display: grid;
}
}<div class="container">
<div class="item">
<img src="https://picsum.photos/200" />
<h3>content 1</h3>
</div>
<div class="item">
<img src="https://picsum.photos/200" />
<h3>content 2</h3>
</div>
<div class="item">
<img src="https://picsum.photos/200" />
<h3>content 3</h3>
</div>
</div>Answered By - Nikola Pavicevic
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.