Question

这里的问题是阅读更多按钮在我的Wordpress博客上的移动主题中不起作用

我的网站：abood250.com

    /* =Mobile Styling
----------------------------------------------- */

@media (max-width: 768px) {
  .pull-right {
    float: none !important;

  }
  .pull-left {
    float: none !important;
  }



  .site-info, .copyright {
      text-align: right;

  }

  .footer-nav.nav, .copyright {
    float: none;

  }

  .site-content {
    width: 100%;
}

  .flex-caption {
    display: none;
  }
  .navbar > .container .navbar-brand {
    margin: 0;

  }
  .navbar-default .navbar-nav > li > a {
    line-height: 20px;
    padding: 15px 10px;
  }

  #footer-area {
    display: none;
  }

  .entry-content {
     margin: 0;

    }



}

Answer 1

问题是由于事实

    <div class="content-area col-md-8" id="primary">
      ...   
    </div>

和

    <div class="widget-area col-md-4" id="secondary" role="complementary">
      ....      
    </div>

在移动视图中重叠。您可以通过检查元素工具进行验证。

要解决此问题，您必须使用媒体查询将followinf规则仅应用于桌面屏幕（可能是平板电脑），但不能用于手机。

 .side-pull-right #primary {
    float: right;
 }

阅读更多按钮在移动主题中不起作用

1 个答案: