Landing page using HTML, CSS

Page 3 comes above page 2. When I make it responsive, I want it to come below page 2. What to do for this, please help.

[image]


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Good Co</title>
</head>

<body>

<div id="main">
 <div class="page1">
 </div>
 <div class="page2">
 </div>
 <div class="page3">
 </div>
    </div>

</body>
</html>

given below CSS code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::selection {
    color: #fff;
    background-color: black;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #F7F7F7;
    font-family:  Tahoma;
}

.page1 {
    min-height: 100vh;
    position: relative;
    padding-top: 36vh;
    width: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
    background-color: green;
}
.page2 {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 2vw 1vw;
    background-color: red;
}

.page3 {
    min-height: 120vh;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    background-color: black;
}

@media (max-width:600px) {

   .page1 {
        position: relative;
        padding-top: 25vh;
        min-height: 70vh;
        padding-left: 3vw;
        padding-right: 3vw;
    background-color: green;
    }

   .page2 {
        width: 100%;
        min-height: 100vh;
        position: relative;
        flex-direction: column;
        padding: 0 3vw;
        background-color: yellow;
    }

  .page3 {
        width: 100%;
        min-height: 120vh;
        position: relative;
        flex-direction: column;
        padding: 0 3vw;
    background-color: black;
    }

}

Iā€™m not sure I understand what you mean by this. The order of the DOM is not changing, so the page 3 div is definitely not before the page 2 div regardless the dimensions of the viewport.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.