1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Vimperno, 17 июл 2019.

  1. Vimperno

    Vimperno

    Регистрация:
    11 мар 2019
    Сообщения:
    10
    Симпатии:
    0
    Добрый день. Возникла такая проблема: есть многостраничный сайт, к нему подключен 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>

    [​IMG]



    Код:
                                 @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;}
    
    
    }
     
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    285
    Симпатии:
    53
    Может надо где-то ограничиваться?
    Код:
    @media screen and (min-width: 600px) and (max-width: 800px) {
    /* CSS-стили */;
    }
     
  3. Vimperno

    Vimperno

    Регистрация:
    11 мар 2019
    Сообщения:
    10
    Симпатии:
    0
    Пробовал так, но почему то не выходит....попробую еще раз...почему то на большом размере экрана, код с медиа запроса (до 480px) переопределяет код с основного файла css. Но почему, ведь он должен работать только при заданном условии до 480px?
     
    Последнее редактирование: 17 июл 2019
  4. Dotrox

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

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Судя по тому, как оно выглядит в инструментах разработчика, у вас где-то лишняя закрывающая скобка, которая обрезает меди запрос и остальные стили становятся общими.
     
  5. Vimperno

    Vimperno

    Регистрация:
    11 мар 2019
    Сообщения:
    10
    Симпатии:
    0
    Спасибо, проверю еще раз код