【问题标题】:White space at header in mobile手机标题中的空白
【发布时间】:2017-11-24 01:09:23
【问题描述】:

我的网站是https://salesportalasia-testsite.azurewebsites.net

使用移动设备查看时,标题处有空白。

我检查了css中的margin-top代码,但没有成功。

谁能帮我解决这个问题...

【问题讨论】:

  • 您好,欢迎来到 Stackoverflow!请花时间阅读stackoverflow.com/help/mcve,然后回来编辑您的问题。请注意,指向外部网站的链接将来对其他人没有帮助,因为该位置的内容可能会发生变化。

标签: html css wordpress header


【解决方案1】:

您在 id="page" 的 div 上有一个内联样式 padding-top: 211px。删除它,这个空白就会消失。

【讨论】:

  • 这样的问题不应该得到答案。
  • @connexo,也许你是对的,但这只花了我 1 分钟的时间来检查。如果需要更多,我根本不会回答。
  • 这不是需要多长时间的问题,而是不让OP的问题,对于SO初学者来说,认为这是一个正确的提问方式。
  • @connexo,好的,知道了。
【解决方案2】:

在媒体查询中分配padding-top:0px !important;

@media (max-width: 767px){
   .wrapper {
      padding-top:0px !important;
    }
}

【讨论】:

  • 这样的问题不应该得到答案。
  • 他是stackoverflow的新手......他以后会清楚地发布
  • 正是因为,尽管 OP 是新手,但立即帮助他走上正确的道路很重要。如果他成功地回答了这种问题,我保证下一个问题的质量也不会更好。
【解决方案3】:

如果您在移动视图中检查页面,您会看到一些内联样式正在应用于<div id="page" style="padding-top: 160px"></div>

看起来它是在 setNavigationOffset 函数中的 custom.min.js 中设置的。

希望对你有帮助。

【讨论】:

    【解决方案4】:

    我注意到您在顶部有 padding-top:160px。

    element.style {
        padding-top: 160px;
    }
    

    在页面中,它看起来像是在主题页面内进行了硬编码,

    您可能在不同的移动设备上有不同的 padding-top,因此请检查并根据设备解决问题​​。这会有所帮助。

    【讨论】:

      【解决方案5】:

      使用此 css 代码删除导致空白的填充顶部。

      #page{
      padding-top:0px !important;
      }
      

      【讨论】:

        【解决方案6】:

        由于导航元素的多个定位,您面临的问题。

        @media (max-device-width: 800px) and (orientation: portrait)
        @media (max-width: 767px)
        style.css?ver=4.7.5:7526
        .navigation {
            position: relative!important;
        }
        

        上面的这个类会覆盖你的固定位置类值。

        .navigation-fixed-top .navigation {
        top: 0;
        position: fixed; /* This not work
        bottom: inherit;
        } 
        

        如果你想克服,就在这里。只需简单地删除相关类

        删除

            @media (max-device-width: 800px) and (orientation: portrait)
        @media (max-width: 767px)
        style.css?ver=4.7.5:7526
        .navigation {
            position: relative!important;
        }
        

        否则,如果您想使用上述类。消除 !重要的关键词。 改成这样。

            @media (max-device-width: 800px) and (orientation: portrait)
        @media (max-width: 767px)
        style.css?ver=4.7.5:7526
        .navigation {
            position: relative;
        }
        

        所以导航元素会根据优先级自动获取固定的类值..

        啤酒花有帮助。!

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-07-14
          • 1970-01-01
          • 2014-08-14
          • 1970-01-01
          • 2012-01-07
          • 2021-08-20
          相关资源
          最近更新 更多