Ссылка Подробнее на Blogger видна, но не активна в мобильном представлении - PullRequest
Новая
       6

Ссылка Подробнее на Blogger видна, но не активна в мобильном представлении

0 голосов
/ 21 февраля 2020

У меня проблема с темой моего блогера, когда при просмотре сайта на моем мобильном телефоне ссылка «читать дальше» видна, но не активна. Я заметил, что когда я переключил свой телефон в горизонтальный режим, ссылка становится активной. Я был бы признателен за любую помощь в попытке выяснить, что исправить - большое спасибо!

Сайт находится здесь: https://www.outoftouchstone.com

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>

1 Ответ

0 голосов
/ 21 февраля 2020

Я проверил элементы, используя Chrome инструменты разработчика.

Когда Джин сказал, что боковая панель перекрывается с вашим контентом.

При проверке элемента боковой панели я обнаружил, что Вы используете 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 (что ни на что не влияет).

Надеюсь, это решит ваша проблема.

...