Wordpress CSS 和媒体查询答案

【问题标题】：Wordpress CSS & Media QueryWordpress CSS 和媒体查询
【发布时间】：2018-11-20 07:14:24
【问题描述】：

我正在使用 Wordpress 主题，并在更改小于 961 像素屏幕尺寸的标签/移动视图的@media 查询时面临一些挑战。以下是链接：

http://www.logopexcil.com 在更高的分辨率上，标题背景图像从最顶部开始但低于 961px 的分辨率，它在顶部栏和导航栏之后开始。我尝试使用以下 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

【解决方案1】：

根据您的描述，我了解到您在对齐方面需要帮助。这个 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 */
}

【讨论】：

【解决方案2】：

问题来了：当屏幕缩小时：

#header 丢失`position: absolute
顶部栏变得可见

【讨论】：

【解决方案3】：

图片是背景图片，所以

@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;
}

.page-title-x div 已经具有内联样式，因此!important 是必需的。

【讨论】：