Перейти к содержимому


Положение И Размер Логотипа В Дизайне Туризм


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 FamilyLand

FamilyLand

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений
  • ГородМосква

Отправлено 27 Май 2017 - 16:58

Добрый день!
Подскажите пожалуйста как сделать логотип больше и заполнить им весь пустой левый верхний угол. При изменении размера логотип сдвигает меню. В HTML не очень силён, пробовал что-то менять тут
#header .container > .logo {display: block;float: left;position: relative;width: 170px;height: 145px;text-align: center;}
#header .container > .logo a {display: block;line-height: 145px;vertical-align: middle;z-index: 2;padding: 3px 5px 5px 5px;}
#header .container > .logo img {display: inline-block;max-height: 145px;}
но максимум что у меня получилось это поставить логотип справа)

Прикрепленные изображения

  • Снимок экрана (11).png


#2 RayLi

RayLi

    Активный участник

  • Модераторы
  • 2 857 сообщений

Отправлено 27 Май 2017 - 17:45

Просмотр сообщенияNo Tolerance (27 Май 2017 - 16:58) писал:

Добрый день!
Подскажите пожалуйста как сделать логотип больше и заполнить им весь пустой левый верхний угол. При изменении размера логотип сдвигает меню. В HTML не очень силён, пробовал что-то менять тут
#header .container > .logo {display: block;float: left;position: relative;width: 170px;height: 145px;text-align: center;}
#header .container > .logo a {display: block;line-height: 145px;vertical-align: middle;z-index: 2;padding: 3px 5px 5px 5px;}
#header .container > .logo img {display: inline-block;max-height: 145px;}
но максимум что у меня получилось это поставить логотип справа)

Здравствуйте.
В данном случае мы не советуем вам это делать, так как подобные изменения негативно скажутся на адаптивности вашего интернет-магазина и повлекут его некорректное отображение на различных разрешениях экрана, в том числе и на мобильных устройств.

#3 FamilyLand

FamilyLand

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений
  • ГородМосква

Отправлено 27 Май 2017 - 18:13

Да, в мобильной версии сейчас посмотрел, логотип отлично отображается, четко видно, но на сайте он совсем маленький и выглядит не очень красиво. Может можно что-то сделать, чтобы это никак не отразилось на мобильной версии? Может не полностью заполнить это место, а сделать хотя бы немного крупнее. Если это не очень сложно, напишите пожалуйста всё же какие нужно внести изменения для увеличения логотипа. Попробую, посмотрю как будет отображаться в мобильной версии и на других разрешениях. Если других вариантов нет и всё будет некорректно отображаться придётся смириться...хотя дизайн новый очень понравился, единственный момент, который хотел исправить - это логотип. В предыдущем варианте дизайна перековырял всё что можно и вроде нормально везде отображалось))

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 753 сообщений

Отправлено 28 Май 2017 - 11:25

Просмотр сообщенияNo Tolerance (27 Май 2017 - 18:13) писал:

Да, в мобильной версии сейчас посмотрел, логотип отлично отображается, четко видно, но на сайте он совсем маленький и выглядит не очень красиво. Может можно что-то сделать, чтобы это никак не отразилось на мобильной версии? Может не полностью заполнить это место, а сделать хотя бы немного крупнее. Если это не очень сложно, напишите пожалуйста всё же какие нужно внести изменения для увеличения логотипа. Попробую, посмотрю как будет отображаться в мобильной версии и на других разрешениях. Если других вариантов нет и всё будет некорректно отображаться придётся смириться...хотя дизайн новый очень понравился, единственный момент, который хотел исправить - это логотип. В предыдущем варианте дизайна перековырял всё что можно и вроде нормально везде отображалось))

Здравствуйте.
В шаблоне main.css код:
#header .header-right {float: left;width: calc(100% - 170px);border-right: 1px solid rgba(60,60,60,0.1);}

Заменил на:
#header .header-right {float: left;width: calc(100% - 215px);border-right: 1px solid rgba(60,60,60,0.1);}

Код:
#header .container > .logo {display: block;float: left;position: relative;width: 170px;height: 145px;text-align: center;}

Заменил на:
#header .container > .logo {display: block;float: left;position: relative;width: 215px;height: 145px;text-align: center;}

Код:
#header .header-right .header-links .top-links .links li {display: inline-block;font-size: 11px;text-transform: uppercase;line-height: 19px;padding: 0 16px;border: 0;}

Заменил на:
#header .header-right .header-links .top-links .links li {display: inline-block;font-size: 11px;text-transform: uppercase;line-height: 19px;padding: 0 11px;border: 0;}

Код:
#custommenu .mainnav > li > a {display: block;position: relative;text-transform: uppercase;padding: 9px 20px 9px 15px;font-size: 14px;font-family: 'PT Sans Narrow', sans-serif;font-weight: 400;letter-spacing: 1px;transition: color 0.1s,background-color .1s;}

Заменил на:
#custommenu .mainnav > li > a {display: block;position: relative;text-transform: uppercase;padding: 9px 20px 9px 10px;font-size: 14px;font-family: 'PT Sans Narrow', sans-serif;font-weight: 400;letter-spacing: 1px;transition: color 0.1s,background-color .1s;}

Проверьте результат, пожалуйста

#5 FamilyLand

FamilyLand

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений
  • ГородМосква

Отправлено 28 Май 2017 - 13:46

Изменений нет, видимо не сохранился результат)

Всё равно спасибо за помощь, сейчас сам попробую внести данные изменения и посмотрю на результат!

#6 FamilyLand

FamilyLand

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 85 сообщений
  • ГородМосква

Отправлено 28 Май 2017 - 13:59

Так гораздо лучше) В мобильной версии всё отображается корректно. Завтра проверю с работы на другом разрешении экрана. Спасибо большое!




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных