博客上的Readmore链接在移动视图中可见但不活动

Question

我的博客主题有问题，当我在手机上查看网站时，"阅读更多"链接是可见的，但不可点击。我注意到，当我把手机横向转到横向模式时，链接就可以点击了。如果有人帮我想办法解决问题，我将不胜感激——非常感谢！

网站在这里：https://www.outoftouchstone.com

粘贴到完整主题：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>

Answer 1

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

正如吉恩所说，侧边栏与你的内容越来越重叠。

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

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

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

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

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