Issue
So I have flexbox
items inside of a flex container
, inside of these items there are image and button as shown in the following picture:
But for some reason when I try to do that, the button goes above the image as per the below screenshot:
My css code:
.navbar .ps_container{ /*flex container*/
justify-content: space-between;
display: flex;
flex-wrap: wrap;
width:100%;
height: auto;
background-color: blue;
padding-bottom: 50px;
padding-top: 50px;
}
.ps_container>div{ /* flexbox items*/
display: flex;
flex:1 1 auto;
justify-content: center;
margin:20px;
padding-inline: 40px;
width:200px;
height:200px;
background-color: white;
}
.ps_container>div img{ /* image style*/
max-height: 300px;
max-width: 300px;
object-fit: contain;
vertical-align: middle;
margin: 0 auto;
}
.ps_container>div a{ /* button style*/
background-color: #20d8da;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
position: relative;
z-index: 1;
display: inline-block;
min-width: 160px;
height: 50px;
color: #fff;
border-radius: 0;
padding: 0 30px;
font-size: 14px;
line-height: 50px;
font-weight: 500;
text-transform: capitalize;
text-align: center;
}
<div class="ps_container">
<div class="block">
<img src="https://dummyimage.com/600x400/000/fff">
<a href="#">view Games</a>
</div>
<div class="block">
<img src="https://dummyimage.com/600x400/000/fff">
<a href="#">view Games</a>
</div>
<div class="block">
<img src="https://dummyimage.com/600x400/000/fff">
<a href="#">view Games</a>
</div>
</div>
I thought maybe it has to do with img not being display:block, but adding that didnt seem to work either.
Solution
I guess you are searching for flex-direction:column;
in your div.block
.
Doc : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
After your block goes on each other because you are setting container size (200x200) smaller than img (300x300) inside it...
DEMO:
.navbar .ps_container{ /*flex container*/
justify-content: space-between;
display: flex;
flex-wrap: wrap;
width:100%;
height: auto;
background-color: blue;
padding-bottom: 50px;
padding-top: 50px;
}
.ps_container>div{ /* flexbox items*/
display: flex;
flex-direction:column; /***** ADDED *****/
flex:1 1 auto;
justify-content: center;
margin:20px;
padding-inline: 40px;
width:200px;
height:200px;
background-color: white;
}
.ps_container>div img{ /* image style*/
max-height: 300px;
max-width: 300px;
object-fit: contain;
vertical-align: middle;
margin: 0 auto;
}
.ps_container>div a{ /* button style*/
background-color: #20d8da;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
position: relative;
z-index: 1;
display: inline-block;
min-width: 160px;
height: 50px;
color: #fff;
border-radius: 0;
padding: 0 30px;
font-size: 14px;
line-height: 50px;
font-weight: 500;
text-transform: capitalize;
text-align: center;
}
<div class="ps_container">
<div class="block">
<img src="https://dummyimage.com/600x400/000/fff">
<a href="#">view Games</a>
</div>
<div class="block">
<img src="https://dummyimage.com/600x400/000/fff">
<a href="#">view Games</a>
</div>
<div class="block">
<img src="https://dummyimage.com/600x400/000/fff">
<a href="#">view Games</a>
</div>
</div>
Answered By - MaxiGui
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.