Wordpress CSS и медиа-запросы

Я использую тему Wordpress и сталкиваюсь с некоторыми проблемами при изменении запроса @media для просмотра вкладок / мобильных устройств с размером экрана меньше 961 пикселей. Следующая ссылка:

http://www.logopexcil.com при более высоком разрешении фоновое изображение заголовка начинается с самого верха, но при разрешении ниже 961 пикселей оно начинается после верхней панели и панели навигации. Я пробовал использовать следующий CSS, но, похоже, что-то делаю не так:

@media (max-width: 961px) {
.has-header-type11 .blox.page-title-x,.parallax-sec 
.page-title-x, .has-header-type11 .video-sec .page-title-x {
   top:0!important;  
  }
}

html css media-queries

19.11.2018 23:26

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 3

Из вашего описания я понимаю, что вам нужна помощь с выравниванием. Этот CSS регулирует контейнер и заголовок, так как они должны быть перевернуты. Надеюсь, поможет.

@media (max-width: 961px) {
.has-header-type11 .blox.page-title-x,
.parallax-sec 
.page-title-x, 
.has-header-type11 .video-sec .page-title-x {top:0!important;}


  .top-bar {display: none;} /* this was taking up space */
  .container {position:relative;top: 70px;} /* in the HTML this is above header, so bump it down */
  #header.w-header-type-11 {position: relative !important;top: -155px;}
  #main-content.container {padding:0;} /* remove unneeded padding */
}

20.11.2018 00:11

Вот проблема: при сжатии экрана:

#header теряет позицию: absolute
верхняя панель становится видимой

20.11.2018 00:11

Изображение является фоновым, поэтому

@media (max-width: 961px)
.has-header-type11 .blox.page-title-x, .parallax-sec .page-title-x, .has-header-type11         
.video-sec .page-title-x {
    background-position-y: top !important;
}

Div .page-title-x уже имеет встроенный стиль, поэтому требуется !important.

20.11.2018 00:14

Другие вопросы по теме

Материал границы пользовательского интерфейса, перезаписывающий текстовое поле

Расширьте родительский div, чтобы он соответствовал высоте изображений

Почему document.execCommand ('' backColor '') не работает с переменной css, а foreColor -?

CSS: расположить текстуру внизу DIV

Исключение элементов с определенными классами в Puppeteer

Как я могу наложить одно изображение на другое?

Как сохранить ссылку внизу с помощью flexbox?

Выровняйте текст вокруг изображения, перемещенного вправо

Как получить ширину окна в javascript, чтобы соответствовать медиа css?

Как сделать так, чтобы заголовок моего контейнера чата был прокручиваемым для каждого элемента в нем и не перекрывался

Wordpress CSS и медиа-запросы

Ответы 3

Другие вопросы по теме

Похожие вопросы