Блог

Главная - Вопросы по программированию - Адаптивный сайт: Как сделать изображение/текст столбцами на рабочем столе, но не столбцами на мобильном устройстве

Адаптивный сайт: Как сделать изображение/текст столбцами на рабочем столе, но не столбцами на мобильном устройстве

#html #css #multiple-columns #responsive #responsive-images

Вопрос:

Я новичок в кодировании и создаю личную домашнюю страницу для задания HTML/CSS. Для страницы о программе мне нужен текст в 1 столбце и изображение в другом столбце в настольной версии, но на мобильном устройстве изображение сверху и текст снизу. Мне удалось заставить столбцы отображаться так, как мне нравится в настольной версии, но проблема в том, что они остаются в столбцах и в мобильной версии. Есть ли какой-нибудь способ сохранить их такими, какие они есть в настольной версии, но сделать так, чтобы изображение располагалось поверх текста, а не рядом с ним в мобильной версии? Спасибо!

 *{
        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-us{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col{
    flex-basis:48%;
    padding: 30px 2px;
}
.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%;
}
} 
 <!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;700amp;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</a></li>
                        <li><a href="">GALLERY</a></li>
                        <li><a href="">CV</a></li>
                        <li><a href="">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="showMenu()"></i>
            </nav>
            <h1>ABOUT</h1>
</section>

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

    <div class="row">
        <div class="about-col">
            <h1>About Me</h1>
            <p>Born and raised in the Bay</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>

Ответ №1:

Одним из способов изменения положения элементов является использование flex-direction . Обычно я создаю родительский контейнер и добавляю display: flex; . По умолчанию flex ориентирован на строки. Когда мне нужно, чтобы элементы были в одном столбце, я создаю носитель с flex-direction: column; контейнером for. Вот пример

 .container {
  display: flex;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  }
}

/* Just some styles, not important */
.element {
  width: 50%;
  padding: 1rem;
  border: 1px solid black;
} 
 <div class="container">
  <div class="element">Element one</div>
  <div class="element">Element two</div>
</div>
Метки: ,