Медиа-запрос ниже 768 пикселей не работает

Question

Я пишу медиа-запрос для веб-страницы и мне удалось написать медиа-запросы для 768 и ниже. Но это не работает должным образом. Я хочу запечатлеть портретные изображения большинства мобильных телефонов ( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3) с разрешением 320 пикселей. Веб-страница, которую я создал, работала для 768 пикселей и выше, но не работала для медиа-запросов ниже 768 пикселей

@media (min-width:481px) and (max-width:768px) {
        .navbar-brand{
    margin-left: 80px;

        }}

      @media (min-width: 768px){ 
           .navbar-brand{
    margin-left: 100px;

    }
         @media (min-width: 991px){ 
        .navbar-brand{
    margin-left: 150px;

        }}

Здесь в этом примере свойство margin left работает очень хорошо на min-width: 768px и min-width:991px, но не работает на @media (min-width:481px) и (max-width:768px).

Answer 1

Вам не хватает фигурной скобки, чтобы закрыть медиа-запрос для min-width: 768px, Вот окончательный код с форматированием, чтобы его было легче увидеть.

@media (min-width:481px) and (max-width:768px) {
    .navbar-brand {
        margin-left: 80px;
    }
}

@media (min-width: 768px) {
    .navbar-brand {
        margin-left: 100px;
    }
}

@media (min-width: 991px) {
    .navbar-brand{
        margin-left: 150px;
    }
}

Для захвата экранов размером 320px с определенным полем вы можете удалить (min-width:481px) and из вашего первого медиа-запроса, если тот же стиль должен применяться, или добавить медиа-запрос, специфичный для этого случая:

@media (max-width: 320px) {
    .classname {
        enter some code here
    }
}

Answer 2

Пожалуйста, посмотрите и подтвердите ниже медиа-запросы с обновленным кодом.

      @media only screen and (min-width: 768px) { 
        .navbar-brand {
           margin-left: 100px;
         }
      }

      @media only screen (min-width: 481px) and (max-width:767px) {
        .navbar-brand {
           margin-left: 80px;
         }
      }