Paul. Paul. - 23 days ago 8
CSS Question

2 Divs side by side => screen minimze => 1 under another one

I have 2 DIVs and have already aligned them side by side. If I minimize my screen (for example, if screen width is 400px), I want the DIVs to be aligned one under another one.

How can I do that? Thanks.



#parent {
width: 100%;
display: flex;
}

#section1 {
width: 50%;
background-color: red;
}

#section2 {
width: 50%;
background-color: lightblue;
}

<div id="parent">
<div id="section1">
Section 1/ Section 1/ Section 1/ Section 1/Section 1/ Section 1/ Section 1/ Section 1
</div>
<div id="section2">
Section 1/ Section 1/ Section 1/ Section 1/Section 1/ Section 1/ Section 1/ Section 1
</div>
</div>




Answer

Use media query

@media (max-width: 400px) {
    #section1, #section2 {
       width: 100%;
    }
}

For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries