@Clazzzer123

Что делать если при изменении высоты браузера все/некоторые элементы сдвигаются?

Получилось сделать через медиа запросы чтобы сайт адаптировался при изменении ширины браузера но стоит мне изменить высоту как все сдвигается, пробовал через min-height и max но ничего не изменяется
<!DOCTYPE html>
<html class = "no-js" lang = 'ru'>
    <head>
        <meta charset = "utf-8">
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
        <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
        <title>Вход</title>
        <meta name = "description" content = "">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <link rel  = "stylesheet" href  = "css/bootstrap.min.css">
        <link rel  = "stylesheet" href  = "style.css">
        <link rel  = "stylesheet" href  = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
        <header>
            <div class = "container-fluid"> <!-- This is the website header-->
                    <div class="icon-youtube">
                        <a href = '#' title = 'Youtube Home'><img src = "play-button.svg" alt = "" id = 'triangle'></a>
                    </div>
                <a href = '#' title = 'Youtube Home'><p id = 'name-youtube'>Youtube</p></a>
                <form action = "" method = 'GET'>
                    <input type  = "search" name  = 'search' placeholder = "Search" id = 'search'>
                    <button type = 'submit' id = 'search-button'>
                        <img src = "search.svg" alt = "" id = 'search-icon' class = 'img-responsive'> 
                    </button>
                </form>
            </div>
        </header>
        <section>
        </section>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    </body>
</html>


.icon-youtube {
    width: 3.3%;
    height: 4%;
    background: -webkit-linear-gradient(left,red,orange);
    background: -webkit-gradient(linear,left top, right top,from(red),to(orange));
    background: -o-linear-gradient(left,red,orange);
    background: linear-gradient(to right,red,orange);
    border-radius: 12px;
    position: absolute;
    left: 3.7%;
    top: 1.2%;
}
#triangle {
    width: 70%;
    height: 80%;
    position: absolute;
    left: 23%;
    top: 12%;
}
#name-youtube {
    position: absolute;
    left: 7.3%;
    top: 1%;
    font-size: 20px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
}
.container-fluid {
    width: 100%;
    background: -webkit-linear-gradient(bottom, rgb(75, 75, 75),rgba(0, 0, 0, 0.733));
    background: -webkit-gradient(linear, left bottom, left top, from(rgb(75, 75, 75)),to(rgba(0, 0, 0, 0.733)));
    background: -o-linear-gradient(bottom, rgb(75, 75, 75),rgba(0, 0, 0, 0.733));
    background: linear-gradient(to top, rgb(75, 75, 75),rgba(0, 0, 0, 0.733));
    height: 40px;
    margin: 0 auto;
}
#search {
    background: -webkit-linear-gradient(left, rgb(48, 46, 46), rgb(32, 31, 31));
    background: -webkit-gradient(linear, left top, right top, from(rgb(48, 46, 46)), to(rgb(32, 31, 31)));
    background: -o-linear-gradient(left, rgb(48, 46, 46), rgb(32, 31, 31));
    background: linear-gradient(to right, rgb(48, 46, 46), rgb(32, 31, 31));
    text-decoration: none;
    outline: 0;
    width: 21.9%;
    position: absolute;
    bottom: 95.3%;
    left: 36.6%;
    color: white;
    border: 1px solid gray;
    border-radius: 10px 0 0 10px
}
#search-button {
    width: 2.3%;
    height: 3.7%;
    position: absolute;
    right: 39.3%;
    bottom: 95.3%;
    background: -webkit-linear-gradient(left, rgb(48, 46, 46), rgb(32, 31, 31));
    background: -webkit-gradient(linear, left top, right top, from(rgb(48, 46, 46)), to(rgb(32, 31, 31)));
    background: -o-linear-gradient(left, rgb(48, 46, 46), rgb(32, 31, 31));
    background: linear-gradient(to right, rgb(48, 46, 46), rgb(32, 31, 31));
    border: 1px solid gray;
    outline: 0;
    text-decoration: none;
    border-radius: 0 10px 10px 0;
}
#search-icon {
    position: absolute;
    right: 13%;
    bottom: 8%;
    width: 70%;
    height: 78%;
}

@media screen and (min-width: 1200px)  {
    .icon-youtube {
        width: 3.8%;
        height: 5%;
        left: 3.7%;
        top: 1%;
    }
    #name-youtube {
        left: 7.8%;
        top: 1.3%;
    }
    #search {
        bottom: 94.7%;
        left: 36.5%;
    }
    #search-button {
        right: 39.3%;
        bottom: 94.7%;
        height: 3.9%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .icon-youtube {
        width: 3.8%;
        height: 5%;
        left: 3.7%;
        top: 1%;
    }
    #name-youtube {
        left: 7.8%;
        top: 1.3%;
    }
    #search {
        bottom: 94.7%;
    }
    #search-button {
        bottom: 94.7%;
        height: 4%;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .icon-youtube {
        width: 3.8%;
        height: 5%;
        left: 3.7%;
        top: 1%;
    }
    #name-youtube {
        left: 7.8%;
        top: 1.3%;
    }
    #search {
        bottom: 94.7%;
    }
    #search-button {
        bottom: 94.7%;
        height: 4%;
    }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    .icon-youtube {
        width: 5%;
        height: 5%;
        left: 3.7%;
        top: 1%;
    }
    #name-youtube {
        left: 9.5%;
        top: 1.3%;
    }
    #search {
        bottom: 94.7%;
    }
    #search-button {
        bottom: 94.7%;
        height: 4%;
    }
}
@media screen and (min-height: 480px) and (max-height: 799px) {
    .icon-youtube {
        width: 5%;
        height: 5%;
        left: 3.7%;
        top: 1%;
    }
    #name-youtube {
        left: 9.5%;
        top: 1.3%;
    }
    #search {
        bottom: 94.7%;
    }
    #search-button {
        bottom: 94.7%;
        height: 4%;
    }
}
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
от 130 000 до 160 000 руб.
от 40 000 руб.
EducaGroup Санкт-Петербург
от 80 000 руб.
25 авг. 2019, в 17:25
500 руб./за проект
25 авг. 2019, в 14:05
60000 руб./за проект