Seeking help with my blogger theme issue - on mobile, the "read more" link is visible but not clickable. When I switch to landscape mode, it becomes clickable. Any suggestions on how to fix this would be greatly appreciated. Thank you!
Website:
Pastebin for full theme code: https://pastebin.com/4hfDvnwh
Snippet of relevant code:
@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>