Member Avatar for Mike_H

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>
  • 2 Contributors
  • 3 Replies
  • 151 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Dani

Recommended Answers

All 3 Replies

Member Avatar for Dani

Sorry for my late response. I don't have a whole lot of experience with flex boxes, but I found this code here:

https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h2>Responsive Four Column Layout with Flex</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>
Member Avatar for Mike_H

Thanks for the reply but it does not work on my code. I will keep searching and trying and hope somebody else has a working answer.

Member Avatar for Dani

Why can’t you use that code instead of yours? Doesn’t it do exactly what you’re looking for?

I’m in bed now about to head to sleep, but I’ll take another go at it in the morning. If you figure it out in the meantime, please post an update :)

I wasn’t able to spend much time on it tonight because it was my bedtime when I first saw the thread.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.