Телефон, вайбер, телеграм и т.п. в шапке сайта

[legzdin]

Добрый день!

Поставила в шапку сайта следующее:

    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
      <li><a href="tg://resolve?domain=assari_ltd" style="background-color: rgb(255, 255, 255);"><img src="https://polair.com.ua/image/catalog/icon/telegram.jpg" style="width: 40px;"></a></li>
      <li><a href="viber://add?number=380684203040"><img src="https://polair.com.ua/image/catalog/icon/viber.png" style="width: 40px;"></a></li>
      <li><a href="skype:live:.cid.3d0850930cd8fed9"><img src="https://polair.com.ua/image/catalog/icon/skype.png" style="width: 40px;" ></a></p></li>
       <li><a href="tel:+380684203040" rel="nofollow"><img src="https://polair.com.ua/image/catalog/icon/tel.png" style="width: 40px;">+380(68)420-30-40 </a></li>
        <li><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>

 

Получается в итоге как на прикрепленном изображении.

Но! Из-за картинок гугл перестает считать сайт адаптированным к мобильным телефонам. А если я пиксели заменяю процентами, вот так: style="width: 15%;", то получается такая ерунда, как на втором изображении.

Прошу помощи, может кто-нибудь с таким сталкивался?

[Dimasscus]

31 минуту назад, legzdin сказал:

Добрый день!

Поставила в шапку сайта следующее:

    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
      <li><a href="tg://resolve?domain=assari_ltd" style="background-color: rgb(255, 255, 255);"><img src="https://polair.com.ua/image/catalog/icon/telegram.jpg" style="width: 40px;"></a></li>
      <li><a href="viber://add?number=380684203040"><img src="https://polair.com.ua/image/catalog/icon/viber.png" style="width: 40px;"></a></li>
      <li><a href="skype:live:.cid.3d0850930cd8fed9"><img src="https://polair.com.ua/image/catalog/icon/skype.png" style="width: 40px;" ></a></p></li>
       <li><a href="tel:+380684203040" rel="nofollow"><img src="https://polair.com.ua/image/catalog/icon/tel.png" style="width: 40px;">+380(68)420-30-40 </a></li>
        <li><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>

 

Получается в итоге как на прикрепленном изображении.

Но! Из-за картинок гугл перестает считать сайт адаптированным к мобильным телефонам. А если я пиксели заменяю процентами, вот так: style="width: 15%;", то получается такая ерунда, как на втором изображении.

Прошу помощи, может кто-нибудь с таким сталкивался?

посмотрите как сделано на других и сделайте по аналогии. ваш вариант в корне не правильный

[legzdin]

Что мой вариант неправильный, я знаю.

[Dimasscus]

5 минут назад, legzdin сказал:

Что мой вариант неправильный, я знаю.

для начала- сделайте правильный размер картинок

сейчас вы подгружаете вот такой размер 

поэтому гугл и ругается. сделайте картинки нужного размера-например 32х32 рх 

[legzdin]

Спасибо, сделаю.