css - Blogger 上的阅读更多链接在移动视图中可见但未激活

问题描述

我的博客主题出现问题，在我的手机上查看该网站时，“阅读更多”链接可见但不可点击。我注意到，当我将手机横向切换到横向模式时，链接变得可点击。在尝试找出要解决的问题时，我将不胜感激 - 非常感谢！

Pastebin 到完整主题：https ://pastebin.com/4hfDvnwh

这是一段可能相关的代码：

     @media only screen and (max-width:480px){
        #outer-wrapper {
          padding:0 8px;
        }
.containz {
width: 365px;
}

a.readmore {
display: block ;
}



#footer-socials {

    height: 300px;
}

#nav {
    width: auto;
}
div#header-inner {
    margin-left: 0;
}
div.conty {
width: 256px;
}



#searchformfix, #header-right {
display: none;
}
.pagenavi span,.pagenavi a {
margin-top:3px;
}
.top-comment{width:37%}

        .top-comment-widget-menu{height:58px}
        ul.xpose_thumbs1,ul.xpose_thumbs22{width:100%}
        #menu-main {
          display: none;
        }
        #sidebar-narrow{display:none}
        div#mywrapper {
          float: center;
          width: auto;
        }
        .header, .header-right, .stylebox,.stylebox1  {
          float:none;
          width:100%;
          max-width:100%
        }
        .header img {
          margin: 0px auto 0;
        }
        .largebanner .widget, #bottombar {
          padding:8px;
        }
        .post, .breadcrumbs {
          margin:0 0 8px;
          padding:8px;
        }
        .stylebox .widget-content,.stylebox1  .widget-content {
          padding:8px;
        }
        h2.post-title, h1.post-title {
          font-size:16px;
        }
.img-thumbnail, .img-thumbnail img {
    width: 100%;
    height: 150px;
    margin-bottom: 15px !important;
}
        .img-thumbnail {
          margin:0 8px 0 0;
        }
        #stylebox-1 .widget, #stylebox-3 .widget,   #stylebox-2 .widget, #stylebox-4 .widget, #stylebox-5 .widget, #stylebox-6 .widget {
          padding:0 0 8px 0;
        }
        .comments .comment-block, .comments .comments-content .inline-thread {
          padding:10px !important;
        }
        .comment .comment-thread.inline-thread .comment {
          margin: 0 0 0 0 !important;
        }
        .footer-left, .footer-right {
          float:none;
          text-align:center;
        }
div#top-social {
   float: none; 
    text-align: center;
}
      }
 @media screen and (max-width:360px){
.header h1.title {font: bold 54px Fjalla One,Arial,Helvetica,sans-serif;padding-top: 6px;}
    }
      @media screen and (max-width:320px){
.containz {
    width: auto;
}
        #outer-wrapper {
          padding:0 6px;
        }
        #menu-main {
          display: none;
        }
        #sidebar-narrow{display:none}
        div#mywrapper {
          float: center;
          width: auto;
        }
        .post, .breadcrumbs {
          padding:6px;
        }
        .stylebox .widget-content,.stylebox1  .widget-content {
          padding:6px;
        }
  #bottombar {
padding: 8px 0;
width: 288px;
}
#bottombar h2 {
    padding: 15px 0px 10px;
}
      }

@media screen and (max-width:319px){
.header h1.title {font: bold 44px Fjalla One,Arial,Helvetica,sans-serif;padding-top: 11px;}
#selectnav1 {
    width: 220px;
}
#outer-wrapper {
    padding: 0px;
}
.containz {
    width: auto;
}
        #outer-wrapper {
          padding:0;
        }
        #menu-main {
          display: none;
        }
        #sidebar-narrow{display:none}
        div#mywrapper {
          float: center;
          width: auto;
        }
        .post, .breadcrumbs {
          padding:6px;
        }
        .stylebox .widget-content,.stylebox1  .widget-content {
          padding:6px;
        }
#bottombar {
    padding: 8px 0px;
    width: 220px;
}
.PopularPosts .item-title {
    padding-bottom: 0.2em;
    padding-top: 4px;
    padding-left: 0px;
    font-size: 10px;
    line-height: 1.3em;
}
        .PopularPosts ul li img {width: 52px;height:52px;}
      }
    </style>

标签： cssmobileblogger

我使用 Chrome 的开发工具检查了这些元素。

正如 Gene 所说，侧边栏与您的内容重叠。

在检查侧边栏元素时，我发现您float: none在媒体查询中使用max-width: 768px.

@media only screen and (max-width: 768px)
#post-wrapper, #sidebar-wrapper {
    float: none;
    width: 100%;
    max-width: 100%;
}

通过float: none从上面的媒体查询中删除行将解决重叠问题，同时在侧边栏和内容之间添加一些空间，您将能够单击“阅读更多”链接。

但随后它将适用float: right（这不会真正影响任何事情）。

我希望这能解决你的问题。

css - Blogger 上的阅读更多链接在移动视图中可见但未激活

问题描述

解决方案

推荐阅读