0
167
ViewsDIV In a Column
Hey I want my divs to appear in a single column like 
, but I am unable to achieve desired results.I want exact same 6 containers in multiple rows and a single column with the same styling as of this div.
Any help will be appreciated
.dot:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
.dot{
position: absolute;
top: 30%;
left: 25%;
transform: translate(-50%,-50%);
padding: 20px;
box-sizing: border-box;
background: #D3D3D3;
border-radius: 4px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
display: flex;
width: 600px;
transition: .5s;
}
.dot .imgBx{
width: 150px;
flex: 0 0 150px;
}
.dot .imgBx img{
max-width: 100%;
}
.dot .content{
padding-left: 20px;
}
.dot .content p{
text-align: justify;
}
.right{
float: right;
flex-wrap: wrap;
flex-direction: column;
}<div class="right">
<div class="dot">
<div class="imgBx">
<img src="{% static 'images/banner/bg.PNG' %}">
</div>
<div class="content">
<p>Bangladesh's apparel exporters concerned as NBR firm on bond licencing</p>
</div>
</div>
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
this line
position: absolute;
makes all your .dot DIVs render on the same position relative to the screen (in this particular case), i suggest removing it
·
Juan Pablo Isaza
Report
Answer question