Логотип в мобильной версии

[KiraA 0]

Я увеличила логотип, сделала его кликабельной шапкой и теперь на мобильных устройствах он отображается некорректно, а именно: не в размере под устройства. Нашла на форуме обсуждение такой же проблемы, на тот момент она, кажется, была не решена. Есть какое-то решение сейчас?

[support 447]

10 час назад, KiraA сказал:

Я увеличила логотип, сделала его кликабельной шапкой и теперь на мобильных устройствах он отображается некорректно, а именно: не в размере под устройства. Нашла на форуме обсуждение такой же проблемы, на тот момент она, кажется, была не решена. Есть какое-то решение сейчас?

Правьте шабло и делайте вывод на всю шапку, к примеру.

Можно в Админке - Оформление - Шаблоны - Основной шаблон поменять:

     <div class="col-sm-5">
       <a href="{base_path}/"><img src="{base_path}/img/logo.png" alt="{config value=site_name}" title="{config value=site_name}" width="247" height="98" /></a>
     </div>
     <div class="col-sm-5">
     </div>
     <div class="col-sm-2">
     </div>

На что-то типа:

     <div class="col-sm-10">
       <a href="{base_path}/"><img src="{base_path}/img/logo.png" alt="{config value=site_name}" title="{config value=site_name}" width="247" height="98" /></a>
     </div>
     <div class="col-sm-2">
     </div>

и поменять размер картинки на свой, т.е. width и height указать.

[KiraA 0]

Изменение не помогло, всё равно в мобильной версии шапка отображается как в полной. Мои размеры width="1153" height="98"

[support 447]

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

Изменение не помогло, всё равно в мобильной версии шапка отображается как в полной. Мои размеры width="1153" height="98"

Покажите ссылку.

Понятное дело, если у Вас такая большая картинка, зачем в адаптивном шаблоне делать логотип шириноы 1153 пикселя?!

Делайте примерно размера оригинального логотипа, а если что-то из оформления нужно, добавляйте фоном.

[KiraA 0]

Я прошу прощения... А добавлять  фоном - это где?

 

[support 447]

Сделайте как было по умолчанию.

http://demo2.vamshop.ru

Сделайте маленькую картинку, которая у Вас слева в виде льва.

Размером с оригинальную лого VamShop.

А то, что справа надо ведь текстом писать, а не картинкой рисовать.

В Админке - Оформление - Шаблоны - Основной шаблон ведь сделана заготовка для текста.

Вот пример:

     <div class="col-sm-5">
       <a href="{base_path}/"><img src="{base_path}/img/logo.png" alt="{config value=site_name}" title="{config value=site_name}" width="247" height="98" /></a>
     </div>
     <div class="col-sm-5">
       <br /><br />
       Здесь пишите свой текст, телефоны.
     </div>
     <div class="col-sm-2">
     </div>

 

[KiraA 0]

Эх, от чего ушла, к тому пришла ))) Спасибо.

[support 447]

1 минуту назад, KiraA сказал:

Эх, от чего ушла, к тому пришла ))) Спасибо.

Ну а зачем Вы текст пишите графическим файлом.

Так же не делается, делается графический логотип, а текстовые данные пишутся текстом.

и опять Вы неправильно сделали.

Вот файл logo.png

Положите его в /app/webroot/img/logo.png

А текст напишите там где я сказал, в сообщении выше.

Так правильно будет.

[KiraA 0]

Нет-нет, сейчас всё так, как Вы написали.

[support 447]

26 минуты назад, KiraA сказал:

Нет-нет, сейчас всё так, как Вы написали.

Не знаю, я смотрел Ваш сайт и там было не так.

[KiraA 0]

Так я кэш почистила и браузер перезапустила )

[support 447]

Да, теперь вижу.

Теперь просто тексты свои добавьте как я выше показывал в примере и всё, будет везде нормально отображаться, и на смартфоне и на компе.

Картинки - выводите картинками.

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

[KiraA 0]

Я сделала вот так. Посмотрите, пожалуйста, не затесалось ли чего лишнего.

<div class="row">
     <div class="col-sm-3">
       <a href="{base_path}/"><img src="{base_path}/img/logo.png" alt="{config value=site_name}" title="{config value=site_name}" width="247" height="98" /></a>
     </div>
    <div style="float: right; width:300px; margin: 25px 20px 0 0; padding:20px; border:#CCCCCC solid 1px; font-size:14px; color:#FF6600; line-height:normal">
<p class="text-center">.......</p> 
</div>
<h1><p><small><p class="text-center">............></p></h1>
     </div>    
     <div class="col-sm-2">
     </div>
     <div class="col-sm-5">
     </div>
  </header>
  <!-- end: Header -->

[support 447]

Если устраивает такой внешний вид, то можно и так.

А ошибки в html-вёрстке проверяются например через html валидатор - https://validator.w3.org/

Хотя и без валидатора видно, что есть ошибки в коде.