[Помогите] @media screen and (max-width: 480px)

Vimperno · 17 июл 2019

Добрый день. Возникла такая проблема: есть многостраничный сайт, к нему подключен bootstrap 4 и медиа запросы. Вроде все адаптируется, но по какой то причине некоторые стили для @media screen and (max-width: 480px) начинают применяться и для 768 и для 1200, короче лезут и все тут. Я только изучаю bootstrap 4 и media, где то накосячил, но понять бы где?????? Media запросы подключены отдельным файлом(содержимое файла ниже под фото). Прошу также опытных людей дать совет по оформлению этих самых медиа запросов, как их правильно оформить. Буду благодарен за любой совет.

HTML:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Болгария</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/media.css">
</head>

Код:

                             @media screen and (max-width: 1199px)

                                    /* ГЛАВНАЯ СТРАНИЦА*/
{

.contacts i {margin-left: 200px;}
    
}

                              @media screen and (max-width: 991px)

{

.contacts i {margin-left: 100px;}

}

                                @media screen and (max-width: 724px)

                                    /* ГЛАВНАЯ СТРАНИЦА*/

{

.contacts i {margin-left:30%;}

.header__title h1 {
    font-size: 3.182rem;
    letter-spacing: 1.764rem;}

.header__title span {
    font-size: 2.636rem;
    letter-spacing: 0.527rem;}

.advantages__title h2 {font-size: 2.125rem;}

.advantages__item {
    width: 25.818rem;
    height: 25.818rem;}

.advantages__item {
    margin-bottom: 24px;
    width: 100%;
    height: 26.818rem;}

.advantages__item p {font-size: 0.99rem;}

.move__text {width: 510px;}

.move__text p {font-size: 1.1rem;}


.realty-and-transport__title h2 {line-height: 3.063rem;}
.first-text, .last-text {width: 510px;}

.ball {top: 49%;}

.circle1 {left: 24%;}

.circle2 {left: 34%;}

.comments__photo img {margin-right: 20px;}

.comments__block {
    width: 584px;
    margin-left: -43px;}

.comments__arrow_left i {left: -10%;}

.comments__arrow_right i {right: -10%;}

.question__title h2 {
    font-size: 1.980rem;
    letter-spacing: 0.163rem;
    line-height: 3.063rem;}

.footer {
    background: #23aae2;
    margin-top: 0px;}


                                                   /*КОНТАКТЫ*/

.contacts-block {
    width: 100%;                       /*Блок займет всю ширину контейнера*/
    height: 655px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 87px;
    box-shadow: none;}

.contacts__block_info .item {
    width: 279px;
    height: 72px;
    margin: 52px 30px 0px 0px;}

.contacts-block__form {
    width: 100%;
    height: 468px;}

.contacts-block .form__input { padding: 15px 20px 15px 30px;}

.contacts-block__form .form__input_submit {
    padding: 12px;
    margin-top: 10px;
    font-size: 1rem;}

.contacts-block__form p:first-child {
    font-size: 1.463rem;
    letter-spacing: 0.156rem;
    line-height: 0rem;}

.contacts-block__form p:nth-child(2) {
    font-size: 1.35rem;
    letter-spacing: 0.125rem;
    line-height: 1.625rem;
    padding-bottom: 10px;}

.contacts {font-size: 1.155rem;}

.contacts__block_info .text {
    width: 100%;
    float: none;
    padding-left: 45px;}

.footer__text li:first-child {
    padding: 25px 10px 25px 40px;}

}



                                      @media screen and (max-width: 480px){

                                               /*ГЛАВНАЯ СТРАНИЦА*/


.advantages__title h2 {
    font-size: 3.125rem;
    line-height: 4rem;
    font-weight: 1000;}


.advantages__item h3 {
  
    font-size: 2.25rem;}

.advantages__item p {
    font-size: 1.5rem;
    line-height: 1.7rem;}

.advantages__item {height: 29.818rem;}

.move__title h2 {
    font-size: 3.625rem;
    line-height: 5.063rem;}

.move__title p {

    font-size: 1.7rem;}

.move__text {
    padding: 30px;
    width: 564px;
    height: 167px;
    width: 423px;}

.move__text p {
    font-size: 1.8rem;
    line-height: 2.588rem;
    }

.move__answer h3 {
    
    font-size: 3.438rem;
    line-height: 5.063rem;
}

.move__answer p {
    font-size: 2.1rem;
    line-height: 2.938rem;}

.button a {
 
    font-size: 16px;}

.move {
    background: #2b4458;
}

.realty-and-transport__title h2 {

    font-size: 3.438rem;
    letter-spacing: 0.663rem;}

.realty-and-transport__title h2 {
    line-height: 4.063rem;
   }

.first-text, .last-text {
    width: 445px;}

.first-text {
    height: 300px;}

.ball {
    position: absolute;
    left: 42%;}

.first-text p, .last-text p{
    font-size: 1.663rem;
}

.footer__text li:last-child {

    display: none;}

.footer__text li {
    padding: 35px 1px 30px 1px;
    font-size: 1.375rem;
    }

.header__logo img {
    margin-top: 10px;}

.form__input {
    padding: 25px 250px 25px 35px;
    }

.form__input_submit {
    padding: 25px 92px 25px 92px;
    font-size: 1.38rem;}

.form__input {
    padding: 25px 250px 25px 35px;}

.question__title h2 {
    font-size: 3.438rem;
    letter-spacing: 1rem;
    line-height: 3.83rem}

.question__title p {
    font-size: 2.313rem;
    letter-spacing: 0.131rem;
    line-height: 2.688rem;
    padding: 35px 35px;}

.comments__title h2 {
    font-size: 3.438rem;
    line-height: 4.063rem;
    letter-spacing: 1rem;}

.comments__photo img {
    float: none;}

.comments__block {
    width: 427px;
    height: 460px;
    margin-left: 12px;}

.comments__text p:nth-of-type(2) {
    font-size: 1.375rem;
    line-height: 2.25rem;
    letter-spacing: 0.088rem;
    width: 73%;
    text-align: justify;
    padding: 35px;}

.comments__text p span:nth-of-type(1) {
    font-size: 1.5rem;
    line-height: 3.063rem;
    letter-spacing: 0.1rem;
    display: block;
    margin-left: 130px;}

.comments__text p span:nth-of-type(2) {
    display: block;
    margin-left: 154px;
    font-size: 1rem;
}



.comments__text span:nth-of-type(3){ margin-left: 28%;
                                     display: block;}
    

                                                /* КОНТАКТЫ*/

.header__logo img {
    margin-top: 0px;
}

.contacts-block {
    width: 100%;
    height: 1070px;}

.contacts__block_info .item {
    width: 100%;
    text-align: center;}

.contacts__block_info img {
    float: none;
    padding-top: 6px;
    display: block;
    margin:0 auto;}

.contacts__block_info .item {
    width: 100%;
    height: 100px;}
  }

.contacts__block_info .text h2 {
    margin-top: 8%;}

.contacts-block__form {
    margin-top: 10%;}

.footer__text li:first-child {
    padding: 25px 0px 25px 0px;}

.contacts__block_info .text {
    padding-left: 0px;}

.contacts-block__form .form__input_submit {
    padding: 12px;}

.footer {
    background: #23aae2;
    margin-top: 0px;}

.footer ul {margin-bottom: 0rem;}


}

iga · 17 июл 2019

Может надо где-то ограничиваться?
Код:
@media screen and (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}

Vimperno · 17 июл 2019

iga сказал(а): ↑
Может надо где-то ограничиваться?
Код:
@media screen and (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
}
Нажмите, чтобы раскрыть...
Пробовал так, но почему то не выходит....попробую еще раз...почему то на большом размере экрана, код с медиа запроса (до 480px) переопределяет код с основного файла css. Но почему, ведь он должен работать только при заданном условии до 480px?

Dotrox · 17 июл 2019

Vimperno сказал(а): ↑

некоторые стили для @media screen and (max-width: 480px)
Нажмите, чтобы раскрыть...

Судя по тому, как оно выглядит в инструментах разработчика, у вас где-то лишняя закрывающая скобка, которая обрезает меди запрос и остальные стили становятся общими.

Vimperno · 18 июл 2019

Спасибо, проверю еще раз код

Войти или зарегистрироваться

[Помогите] @media screen and (max-width: 480px)

Vimperno

iga

Vimperno

Dotrox Команда форума

Vimperno