I'm struggling with getting two divs on my page to stack on top of each other when viewed on mobile. I've tried using @media queries in my CSS, but it's not working as expected. Any assistance to solve this issue would be greatly appreciated. Thank you in advance!
Below is the HTML code for the divs:
<div id="page3">
<div id="left3">
<img src="images/entertowin_03.png">
<h4>•text<br>•text<br>•text<br></h4>
</div>
<div id="right3">
<img src="images/winnermap_06.png">
</div>
</div>
<div id="dog">
<image src="images/barrybottom_04.jpg"></image>
<h3><a href="#neheader" class="class1">Back to top</a></h3>
</div>
The CSS styling for the divs is provided below:
#page3 {
background-image: url("../images/page3back_01.jpg");
background-size: cover;
width: 100%;
min-height: 600px;
font-size: 16px;
height: 2em;
display: flex;
overflow:hidden;
}
#left3 {
width:100%;
padding-top: 5%;
margin-left: 10%;
max-width: 440px;
height: 330px;
display: block;
flex: 0 0 65%;
}
#right3 {
width: 100%;
padding-top: 5%;
margin-left: 10%;
max-width: 440px;
height: 330px;
display:block;
flex: 1;
padding-top: 7%;
}
Furthermore, here is the media query code I attempted to use:
/** Responsive **/
#left3 {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
border-right:2px solid #000;
}
#right3 {
background-color: white;
overflow:hidden;
margin:10px;
border:2px dashed #ccc;
min-height:170px;
}
@media screen and (max-width: 400px) {
#left {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}