@M_Master

Как поставить блоки с логотипом и копирайтом по центру и сверху ul?

При медиа адаптации не получается поставить блоки с логотипом и копирайтом по центру и сверху ul. Также появляется горизонтальный скролл. Как это исправить?

</style>
</head>
<body>
   <section>
    <header>
        <div class="logo">
            <p>Logo</p>
        </div>
        <div class="menu">
            <ul>
                <li>Главная</li>
                <li>О нас</li>
                <li>Продукты</li>
                <li>Контакты</li>
            </ul>
        </div>
    </header>
    <div class="main">
        <div class="sidebar">
            <p>Aside type 1</p>
        </div>
        <div class="content">
          <h1>Что такое Lorem ipsum?</h1><br>
          <br>Для заполнения страницы в веб-дизайне используют специально сгенерированный бессмысленный текст, получивший название Lorem ipsum. Перевод данной фразы в таком виде отсутствует, это искаженная цитата из труда Цицерона «О пределах добра и зла», написанного на латыни. Данное словосочетание — обрезка фразы «Dolorem ipsum», которая переводится как «саму боль».<br>
          <br><span>Почему он используется?</span><br>
          Использовать данный текст в книгопечатании начали еще 500 лет назад, чтобы продемонстрировать различные шрифты и внешний вид страницы заказчику. Благодаря такому заполнителю было видно, сколько строчек помещается на странице, подходит ли дизайн шрифтов для данной книги.<br>
          <br><span>Откуда он появился?</span><br>
          В самом деле, волшебные слова Lorem ipsum известны многим из тех, кто работает в области полиграфии или же веб-дизайна. Более того, эта абракадабра — только начало большого текста, и существуют программы, которые сгенерируют продолжение якобы бессмыслицы на псевдолатыни, выдав необходимое число символов, абзацев или параграфов. Для чего? Только для того, чтобы заполнить место текстом, похожим на обычный текст, изображенным латинским алфавитом, но внимания читателя не отвлекающим. <br>
        </div>
        <div class="sidebar_2">
            <p>Aside type 2</p>
        </div>
    </div>
    <footer>
        <div>
            &copy;Сopyright 2017
        </div>
        <ul>
            <li>Twitter</li>
            <li>Vkontakte</li>
            <li>Facebook</li>
        </ul>
    </footer>
   </section>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing:border-box;
        }
        body {
            margin: 0;
            padding: 0;
            }
        section{
            display:flex;
            flex-direction: column;
            min-height:100vh;
            min-width:100vw;}
        header {
            width:100%;
            display: flex;
            background-color: skyblue;
            justify-content: space-between;
        }
        ul {
            list-style-type: none;
            display: flex;
            justify-content: flex-end;
        }
        li{
            padding:10px;
            color:white;
        }
        footer{
            width:100%;
            display: flex;
            justify-content: space-between;
            background-color: mediumaquamarine;
        }
        .sidebar{
            width:20%;
            flex-grow:1;
            background-color: orange;
            text-align: center;

        }
        .sidebar_2{
            width:20%;
            flex-grow:1;
            background-color: pink;
            text-align: center;
        }
        .content{
            width:100%;
            padding:20px;
            text-align: center;
        }
        .main{
            display:flex;
            flex-grow:1;

        }
        @media (max-width: 760px) {
            header {
                flex-wrap: wrap;
                justify-content: center;
            }

            .logo{
                background-color: darkgrey;
                height: 30px;
                width: 100px;
                margin: 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .logo {
                background-color: grey;
                width: 100%;
            }

            ul, footer div {
                justify-content: center;
            }
            
            ul {
                justify-content: space-around;
            }

            footer ul {
                justify-content: center;
            }

            .main {
                flex-wrap:wrap;
            }

            .content {
                order: -1;
                flex-basis: 100%;
            }

            .sidebar {
                flex-basis: 50%;
            }

            .sidebar_2 {
                flex-basis: 50%;
            }

            footer {
                flex-wrap: wrap;
            }

            footer div, .footer ul {
                flex-basis: 100%;
            }
        }

        @media (max-width: 375px)   {
            ul {
                display: flex;
                flex-direction: column;
                width: 100%;
                padding-left: 0px;
                margin: 0;
            }

            .sidebar {
                flex-basis: 100%;
            }

            .sidebar_2 {
                flex-basis: 100%;
            }

            li {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                margin-right: 0px;
            }
        }
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 1
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Песочница
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы