i am encountering difficulties in converting 3 divs from horizontal to vertical orientation. The issue arises when the screen width is reduced. The desired outcome is for the 3 divs to stack on top of each other when the browser width is decreased. Currently, the code accommodates 2 divs in the first row if there is space available.
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;
}