2013-12-05 3 views
0

Я использую виджеты комментариев Facebook и Google+ на странице. Поскольку страница реагирует, когда страница сжимается ниже 767px, заголовок табуляции исчезнет, ​​и значки останутся. Это заставляет меня поместить ссылку на значок вместо закладки. Я не могу понять, как получить название, чтобы исчезнуть, и связь остается на вкладке. Может ли кто-нибудь помочь?Повторное использование этой же ссылки

HTML:

<ul> 
    <li><a href="#tabs-1"><img src="/images/icon-facebook.png" alt="Facebook Icon" /><p class="tabTitle">Comment on <strong class="fbBlue">Facebook</strong></p></a></li> 
    <li><a href="#tabs-2"><img src="/images/icon-plus.png" alt="Google+ Icon" /><p class="tabTitle">Comment on <strong class="googleRed">Google+</strong></p></a></li> 
</ul> 

CSS:

#tabs li{ 
    font-size: .875em; 
    width: 48%; 
    margin: 0 1%; 
} 
@media (max-width: 767px){ 
.tabTitle{ 
     display: none; 
    } 

    #tabs-1{ 
     width: 80%; 
    } 

    #tabs-2{ 
     width: 80%; 
} 

.g-comments{ 
    width: 90%; 
    } 
}  
+1

Вам нужна еще одна новая строка после «HTML:» в вашем вопросе, чтобы правильно форматировать ваш HTML-код. –

+0

спасибо ... Я не использовал эту страницу через некоторое время. – justLearning

+0

Я не понимаю, что ваш вопрос может воспроизвести его на примере jsfiddle, он отлично работает со мной http://jsfiddle.net/yLZp2/ – DaniP

ответ

0

Используется etiquete правильно мета окна просмотра:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

Tha'ts правильный код является:

@media only screen and (max-width: 767px) { 
    ul li p { 
     display: none; 
    } 
} 

Пример: http://jsfiddle.net/Aua95/

Смежные вопросы