Различное расположение заголовков между настольным и мобильным

Question

Я настраиваю CSS для клиента, который запускает Avada на своем WP-сайте.
Он хочет, чтобы заголовок был внизу на рабочем столе, но вверху на мобильном.

Я правильно разместил заголовок на рабочем столе:

.fusion-header-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 76px;
}

Возможно ли разместить его сверху на мобильном телефоне, используя только CSS? Если это помогает, с проверяющим элементом я видел, что заголовок имеет z-index: 5.

Answer 1

Поскольку ваш код работал на настольном компьютере, вы можете сделать то же самое, но с атрибутом top или со свойством Stati c для мобильных устройств, используя CSS медиазапросы:

@media(max-width: 767px) {
   .fusion-header-wrapper {
      position: static;
      /* static is the default property */
   }
   /* OR */
   .fusion-header-wrapper {
      top: 0;
   }
}

Answer 2

Вы можете использовать медиа-запрос для того же

@media only screen and (min-width: 700px){ top:0}