I have a website with a header, three columns and footer that looks good on desktop. When viewed on my phone, the columns remain horizontal instead of going vertical. I have tried several different @media combinations but cannot get it to work. Can some smart person tell me what the @media code needs to be for this sample code?
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>
.wrapper, html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
}
.row1 {
background-color: #a5b9ee;
margin: 50px 0 0 0;
padding-bottom: 5px;
}
.row3 {
background-color: #a5b9ee;
text-align: center;
}
.row2 {
background-color: green;
flex:2;
display: flex;
}
.col1 {
background-color: blue;
flex: 0 0 240px;
}
.col2 {
background-color: red;
flex: 1 1;
}
.col3 {
background-color: yellow;
flex: 0 0 240px;
}
p {margin 0 150px 0 150px;}
@media screen and (max-width: 500px) {
.wrapper, .col1, .col2, .col3 {
flex-direction: flex-column;
display: flex;
}
}
</style> </head> <body> <div class="wrapper"> <div class="row1"> <P>HEADER - ROW 1</P> </div> <!-- row1 --> <div class="row2"> <div class="col1"> <p> COLUMN 1</p> </div> <!-- col1 --> <div class="col2"> <p> COLUMN 2</p> </div> <!-- col 2--> <div class="col3"> <p> COLUMN 3</p> </div> <!-- col3 --> </div> <div class="row3"> <h5>© 2007-2020 St. Paul the Apostle Catholic Church • 1425 E. Shelby Dr. • Memphis TN 38116 • (901) 346-2380</h5> </div> <!-- row 3 --> </div> <!-- wrapper --> </body> </html>