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


Адаптивность Шаблона


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

#1 Сергей Наумчук

Сергей Наумчук

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

  • Пользователи
  • PipPipPip
  • 97 сообщений

Отправлено 28 Июнь 2014 - 08:36

Добрый день! Подскажите, можно ли исправить ситуацию: сайт на шаблоне осень, открытый на мобильных устройствах отображается не совсем корректно. Точнее логотип и изображение корзины (прилагаю скрин)

Можно ли сделать так,чтоб эти изображения пропорционально уменьшались ( как например баннер) ?

Просмотр сообщенияСергей Наумчук (28 Июнь 2014 - 08:34) писал:

Добрый день! Подскажите, можно ли исправить ситуацию: сайт на шаблоне осень, открытый на мобильных устройствах отображается не совсем корректно. Точнее логотип и изображение корзины (прилагаю скрин)

Можно ли сделать так,чтоб эти изображения пропорционально уменьшались ( как например баннер) ?


адрес сайта: bizon76.ru

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

  • IMGP9816.JPG


#2 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 28 Июнь 2014 - 11:14

Просмотр сообщенияСергей Наумчук (28 Июнь 2014 - 08:36) писал:

Добрый день! Подскажите, можно ли исправить ситуацию: сайт на шаблоне осень, открытый на мобильных устройствах отображается не совсем корректно. Точнее логотип и изображение корзины (прилагаю скрин)

Можно ли сделать так,чтоб эти изображения пропорционально уменьшались ( как например баннер) ?




адрес сайта: bizon76.ru
В файле "style.css".
Найти:
#header_shopping_cart {position: static;width: 170px;float: right;display: none;clear: both;margin-top: -30px;;list-style: none;background-clip: padding-box;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;background: #f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png') no-repeat 12px;border: 1px solid #cecece;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);}

Заменить:
#header_shopping_cart {position: static;width: 170px;float: right;display: none;clear: both;margin-top: -30px;;list-style: none;background-clip: padding-box;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;background: #f7f7f7 url('http://design.bizon76.ru/cart_gray.png?8127') no-repeat;background-size: 40px 30px;border: 1px solid #cecece;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);}


#3 Сергей Наумчук

Сергей Наумчук

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

  • Пользователи
  • PipPipPip
  • 97 сообщений

Отправлено 28 Июнь 2014 - 11:21

Просмотр сообщенияCastiel (28 Июнь 2014 - 11:14) писал:

В файле "style.css".
Найти:
#header_shopping_cart {position: static;width: 170px;float: right;display: none;clear: both;margin-top: -30px;;list-style: none;background-clip: padding-box;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;background: #f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png') no-repeat 12px;border: 1px solid #cecece;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);}

Заменить:
#header_shopping_cart {position: static;width: 170px;float: right;display: none;clear: both;margin-top: -30px;;list-style: none;background-clip: padding-box;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;background: #f7f7f7 url('http://design.bizon76.ru/cart_gray.png?8127') no-repeat;background-size: 40px 30px;border: 1px solid #cecece;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);}

Спасибо,а как быть с логотипом?

#4 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 28 Июнь 2014 - 11:30

Просмотр сообщенияСергей Наумчук (28 Июнь 2014 - 11:21) писал:

Спасибо,а как быть с логотипом?

В файле style.css, в самом конце, есть блоки с разными размерами экрана
@media only screen and (max-width:1210px)
{
Код
}

Вам необходимо добавить в нужные блоки данный код размером логотипа (размеры выберите сами)
#header-logo img {width:300px;}

Получиться должно примерно так
@media only screen and (max-width:1210px)
{
  .container{width:950px}
  .column,.columns{margin:0 10px}
  .half{width:455px}
  .one-third{width:220px}
  .two-third{width:690px}
  .hide-tablet-n-mobile{display:none!important}
  #category_view_type.list_view #product_list li{width:690px}
  #left-column{width: 324px;}
  #left-column #image-block{width:408px}
  #left-column #image-block #small_pic{width:408px;height:auto}
  #left-column #view_scroll_left,#left-column #view_scroll_right{width:48px}
  #left-column #thumbs_list{width: 210px;}
  #right-wrapper{width: 326px;}
  #product_page_hook_right{display:none}
  #product_comparison .product_desc{height:60px}
  ul#order_step li{width:168px}
  ul#order_step li#step_end{width:172px}
#header-logo img {width:300px;}
}


#5 Сергей Наумчук

Сергей Наумчук

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

  • Пользователи
  • PipPipPip
  • 97 сообщений

Отправлено 28 Июнь 2014 - 11:40

Просмотр сообщенияCastiel (28 Июнь 2014 - 11:30) писал:

В файле style.css, в самом конце, есть блоки с разными размерами экрана
@media only screen and (max-width:1210px)
{
Код
}

Вам необходимо добавить в нужные блоки данный код размером логотипа (размеры выберите сами)
#header-logo img {width:300px;}

Получиться должно примерно так
@media only screen and (max-width:1210px)
{
.container{width:950px}
.column,.columns{margin:0 10px}
.half{width:455px}
.one-third{width:220px}
.two-third{width:690px}
.hide-tablet-n-mobile{display:none!important}
#category_view_type.list_view #product_list li{width:690px}
#left-column{width: 324px;}
#left-column #image-block{width:408px}
#left-column #image-block #small_pic{width:408px;height:auto}
#left-column #view_scroll_left,#left-column #view_scroll_right{width:48px}
#left-column #thumbs_list{width: 210px;}
#right-wrapper{width: 326px;}
#product_page_hook_right{display:none}
#product_comparison .product_desc{height:60px}
ul#order_step li{width:168px}
ul#order_step li#step_end{width:172px}
#header-logo img {width:300px;}
}

Большое спасибо!




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

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