How to convert 3 horizontal items vertically when screen shrinks? - css

Question

i'm having big issues trying to convert 3 divs from horizontal to vertical.
The code below shows that for a screen bigger than 1200px, everything works fine.
What i want is a responsive behaviour: by reducing the browser's width, the 3 divs are positioned one below the other. Currently, the code will adjust so that 2 divs are in the first row if there is room for it.
HTML:
<div class="example">
<div class="example-item example-item-1">abcabcabcabcabcabcabcabcabcabcabcabcabc</div>
<div class="example-item example-item-2">123456789012345678901234567890123456789012345678901234567890</div>
<div class="example-item example-item-3">xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</div>
</div>
and CSS:
.example {
background-color: black;
padding: 10px 20px;
text-align: center;
}
.example-item {
font-size: 0.7em;
display: inline-block;
padding: 10px 10px;
}
.example-item-1 {
background-color: blue;
}
.example-item-2 {
background-color: red;
}
.example-item-3 {
background-color: green;
}
Actual result, what i don't want
Desire result, what i want

Answer 1

You can use this css code and change the "max-width" property with your own decision:
#media screen and (max-width: 900px) {
.example-item {
display: block;
}
}
jsfiddle:
https://jsfiddle.net/mr_seven/1ktcqay4/2/
you can change result area width to see what will be happened if screen width changes.

Answer 2

In all honesty I would look at using a grid system e.g. bootstraps grid system or even better checkout flex box.
However to simply answer the question you could do this:
.container{
text-align:center;
}
.box{
height:20px;
width:150px;
border:1px solid black;
display: block;
margin:0 auto;
}
#media only screen and (min-width: 768px) {
.box {
display: inline-block;
}
}
.box1{
background:steelblue;
}
.box2{
background:indianred;
}
.box3{
background:coral;
}
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
https://jsfiddle.net/y7c96sp8/