как применить 2 css стилей в 1 классе div?

Question

Я пытаюсь переместить шорткод, который я вставил в заголовок Wordpress. Проблема в том, что из приведенных ниже правил 2 css работает только первое. Если я изменю порядок, то снова работает только первый.

@media only screen and (max-width: 1024px) {
    .right-header-wrap-flags {
        position: absolute;
        top: 25px;
        left: 22px;
        }

.navigation-wrap{ 
padding-top: 60px;

} @media only screen and (min-width: 1025px) {
.right-header-wrap-flags {
position: relative;
left: 600px; 
top: 50px;
}

Answer 1

, если вы хотите, чтобы класс «Navigation-wrap» был частью первого медиа-запроса:

    @media only screen and (max-width: 1024px) {
        .right-header-wrap-flags {
            position: absolute;
            top: 25px;
            left: 22px;
            }
    
      .navigation-wrap{ 
      padding-top: 60px;
    
     }
    } <-- this was missing!
    
    @media only screen and (min-width: 1025px) {
    .right-header-wrap-flags {
    position: relative;
    left: 600px; 
    top: 50px;
    }
}

если «navigation-wrap» не должен зависеть от ваших медиа-запросов:

    @media only screen and (max-width: 1024px) {
        .right-header-wrap-flags {
            position: absolute;
            top: 25px;
            left: 22px;
            }
    } <-- this was missing!
      .navigation-wrap{ 
      padding-top: 60px;
    
     }
    
    
    @media only screen and (min-width: 1025px) {
    .right-header-wrap-flags {
    position: relative;
    left: 600px; 
    top: 50px;
    }
  }

причина: вы забыли скобку, которая в основном означала, что второй медиа-запрос был похож на ваш первый, поэтому он никогда не мог произойти! Когда размер вашего экрана достиг 1025 пикселей, первый медиа-запрос больше не активен, а второй был внутри первого, поэтому этого больше не могло произойти. Это должно исправить

Answer 2

Да, работает только первый код CSS, вы должны использовать javascript, чтобы изменить стили в соответствии с указанными вами Условиями.