How to eliminate a column for mobile view?

user_17171254 0
Viewed 104

I'm new to coding and am trying to make a responsive site. On the desktop version of the site, I want to have the text in one column and image in another. But for the mobile version, I would like the image to be on top of the text. Is there any way to achieve this? Would using @media queries solve this? Thank you!

*{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
}
.header{
        min-height: 100vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
        background-position: center;
        background-size: cover;
        position: relative;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav a{      
        color: #fff;
        text-decoration: none;
        font-size: 14px;
}
nav a:hover{
    color:#f44336;
    transition: .4s;
}
.nav-links{
        flex:1;
        text-align: right;
}
.nav-links ul li{
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
        position: relative;
}
.nav-links ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 13px;
}
nav ul li a:hover{
    color:#f44336;
    transition: .4s;
}
.text-box{
        width: 90%;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
}
.text-box h1{
    font-size: 54px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

nav .fa{
        display: none;
}

@media(max-width: 700px){
    nav{
        display: flex;
        padding: 4% 8%;
        justify-content: space-between;
        align-items: center;
    }
        .text-box h1{
                font-size: 14px;
        }
        .text-box p{
                font-size: 11px;
        }
        .nav-links ul li {
            display: block;
        }
        .nav-links{
            position: absolute;
            background: #f44336;
            height: 100vh;
            width: 200px;
            top: 0;
            right: -200px;
            text-align: left;
            z-index: 2;
            transition: 1s;
        }
        nav ul li a:hover{
            color:#12161d;
            transition: .4s;
        }
        nav .fa{
            display: block;
            color: #fff;
            margin: 10px;
            font-size: 22px;
            cursor: pointer;
        }
        .nav-links ul{
            padding: 30px;
        }
}

/*--footer--*/

.footer{
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.icons .fa{
        color: #808080;
        margin: 0 13px;
        cursor: pointer;
        padding: 18px 0;
    }

/*--about page--*/

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.about-me{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col{
    flex-basis:48%;
    padding: 30px 30px;
}
.about-col img{
    width: 100%;
}

.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25px;
}
.row {
   display:flex;
}

@media(max-width: 700px){
            .about-col h1{
                font-size: 14px;
            }
        .about-col p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.about-col img{
    width: 100%;
}
.sub-header h1{
    margin-top: 80px;
}
}

/*--CV--*/
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width: 1000px;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #c5c5c5;
}

.timeline ul{
    margin: 0;
    padding:0;
}

.timeline ul li{
    list-style: none;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline ul li:nth-child(odd){
    float: left;
    text-align: right;
    clear: both;
}

.timeline ul li:nth-child(even){
    float: right;
    text-align: left;
    clear: both;
}

.content{
    padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before{
    content: '';
    position: absolute;
    top: 24px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li:nth-child(even):before{
    content: '';
    position: absolute;
    top: 28px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li h3{
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #f44336;
}

.timeline ul li p{
    margin: 10px 0 0;
    padding: 0;
}

.time{
    color: #808080;
}

    
@media(max-width: 700px){
            .timeline h3{
                font-size: 14px;
            }
            .timeline h4{
                font-size: 14px;
            }
        .timeline p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.sub-header h1{
    margin-top: 80px;
}
}

/*--contact--*/
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}
.contact{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}
.contact{
text-align: center
}

.center {
    padding-top: 25px;
    padding-bottom: -5px;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
table {
  border-spacing: 10px;
}
td {
        width: 110px;
        text-align: center;
        vertical-align: middle;
}

.hours{
    color: #808080;
    font-size: 14px;
    text-align: center
}
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Personal Homepage</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
    </head>
    <body>
        <section class="sub-header">
            <nav>
                <a href="index.html">AMANDA YEE</a>
                <div class="nav-links" id="navLinks">
                  <i class="fa fa-times" onclick="hideMenu()"></i>
                    <ul>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="">GALLERY</a></li>
                        <li><a href="CV.html">CV</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showMenu()"></i>
            </nav>
            <h1>ABOUT</h1>
</section>

<!--about content-->
<section class="about-me">

    <div class="row">
        <div class="about-col">
            <h1>This is me.</h1>
            <p>My name is ABC and I am from XYZ.<br></p>
    </div>
    <div class="about-col">
        <img src="images/about.jpg" alt="girl smiling">
    </div>
</div>

</section>



<!--Footer-->

<section class="footer">
    <div class="icons">
    <i class="fa fa-linkedin-square"></i>
    <i class="fa fa-instagram"></i>
    <i class="fa fa-envelope-o"></i>
    </div>
</section>






<!--Javascript for Toggle Menu-->
    <script>
        var navLinks = document.getElementById("navLinks");
        
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }
    </script>
    
    </body>
</html>

responsive-images responsive-design multiple-columns css html
1 Answers

Use flex-direction: column-reverse in media query which covers mobile.

In your case i added this under @media(max-width: 700px)

Check working code below.

*{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
}
.header{
        min-height: 100vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
        background-position: center;
        background-size: cover;
        position: relative;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav a{      
        color: #fff;
        text-decoration: none;
        font-size: 14px;
}
nav a:hover{
    color:#f44336;
    transition: .4s;
}
.nav-links{
        flex:1;
        text-align: right;
}
.nav-links ul li{
        list-style: none;
        display: inline-block;
        padding: 8px 12px;
        position: relative;
}
.nav-links ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 13px;
}
nav ul li a:hover{
    color:#f44336;
    transition: .4s;
}
.text-box{
        width: 90%;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
}
.text-box h1{
    font-size: 54px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

nav .fa{
        display: none;
}

@media(max-width: 700px){
.row {
    flex-direction: column-reverse;
}
    nav{
        display: flex;
        padding: 4% 8%;
        justify-content: space-between;
        align-items: center;
    }
        .text-box h1{
                font-size: 14px;
        }
        .text-box p{
                font-size: 11px;
        }
        .nav-links ul li {
            display: block;
        }
        .nav-links{
            position: absolute;
            background: #f44336;
            height: 100vh;
            width: 200px;
            top: 0;
            right: -200px;
            text-align: left;
            z-index: 2;
            transition: 1s;
        }
        nav ul li a:hover{
            color:#12161d;
            transition: .4s;
        }
        nav .fa{
            display: block;
            color: #fff;
            margin: 10px;
            font-size: 22px;
            cursor: pointer;
        }
        .nav-links ul{
            padding: 30px;
        }
}

/*--footer--*/

.footer{
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.icons .fa{
        color: #808080;
        margin: 0 13px;
        cursor: pointer;
        padding: 18px 0;
    }

/*--about page--*/

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.about-me{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col{
    flex-basis:48%;
    padding: 30px 30px;
}
.about-col img{
    width: 100%;
}

.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25px;
}
.row {
   display:flex;
}

@media(max-width: 700px){
            .about-col h1{
                font-size: 14px;
            }
        .about-col p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.about-col img{
    width: 100%;
}
.sub-header h1{
    margin-top: 80px;
}
}

/*--CV--*/
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width: 1000px;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #c5c5c5;
}

.timeline ul{
    margin: 0;
    padding:0;
}

.timeline ul li{
    list-style: none;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline ul li:nth-child(odd){
    float: left;
    text-align: right;
    clear: both;
}

.timeline ul li:nth-child(even){
    float: right;
    text-align: left;
    clear: both;
}

.content{
    padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before{
    content: '';
    position: absolute;
    top: 24px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li:nth-child(even):before{
    content: '';
    position: absolute;
    top: 28px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li h3{
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #f44336;
}

.timeline ul li p{
    margin: 10px 0 0;
    padding: 0;
}

.time{
    color: #808080;
}

    
@media(max-width: 700px){
            .timeline h3{
                font-size: 14px;
            }
            .timeline h4{
                font-size: 14px;
            }
        .timeline p{
                font-size: 10px;
            }
        .about-col{
    flex-basis:48%;
    padding: 20px 5px;
    }
.sub-header h1{
    margin-top: 80px;
}
}

/*--contact--*/
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}
.contact{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}
.contact{
text-align: center
}

.center {
    padding-top: 25px;
    padding-bottom: -5px;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
table {
  border-spacing: 10px;
}
td {
        width: 110px;
        text-align: center;
        vertical-align: middle;
}

.hours{
    color: #808080;
    font-size: 14px;
    text-align: center
}
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Personal Homepage</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
    </head>
    <body>
        <section class="sub-header">
            <nav>
                <a href="index.html">AMANDA YEE</a>
                <div class="nav-links" id="navLinks">
                  <i class="fa fa-times" onclick="hideMenu()"></i>
                    <ul>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="">GALLERY</a></li>
                        <li><a href="CV.html">CV</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showMenu()"></i>
            </nav>
            <h1>ABOUT</h1>
</section>

<!--about content-->
<section class="about-me">

    <div class="row">
        <div class="about-col">
            <h1>This is me.</h1>
            <p>My name is ABC and I am from XYZ.<br></p>
    </div>
    <div class="about-col">
        <img src="images/about.jpg" alt="girl smiling">
    </div>
</div>

</section>



<!--Footer-->

<section class="footer">
    <div class="icons">
    <i class="fa fa-linkedin-square"></i>
    <i class="fa fa-instagram"></i>
    <i class="fa fa-envelope-o"></i>
    </div>
</section>






<!--Javascript for Toggle Menu-->
    <script>
        var navLinks = document.getElementById("navLinks");
        
        function showMenu(){
            navLinks.style.right = "0";
        }
        function hideMenu(){
            navLinks.style.right = "-200px";
        }
    </script>
    
    </body>
</html>

user_113933810
Related