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


Изменение Мобильной Версии

моб ильная версия андроид

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

#1 Heatray

Heatray

    Пользователь

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

Отправлено 23 Декабрь 2014 - 15:11

Добрый день, можно ли вообще отлючить моб. версию? Пробовал на 3 устройствах - 4.5 5.2 и 10 дюймов экран - full hd и qhd. Во первых иконки разделов идут в ряд, а на планшете 5 в один ряд - 6ая в другой. Во вторых пож иконками перестали показываться надписи - что это за раздел. В третьих это выпадающее меню верхнего блока. Ну кому оно надо) На сайте то такого нет.Сидишь пилишь пилишь дизайн а тут все разрушено. Можно ли сделать так чтобы моб  отображал полную версию как компьютер?

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

  • Jd0CPY38gwU.jpg


#2 shnafix

shnafix

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

  • Модератоpы
  • 506 сообщений

Отправлено 23 Декабрь 2014 - 17:49

Просмотр сообщенияHeatray (23 Декабрь 2014 - 15:11) писал:

Добрый день, можно ли вообще отлючить моб. версию? Пробовал на 3 устройствах - 4.5 5.2 и 10 дюймов экран - full hd и qhd. Во первых иконки разделов идут в ряд, а на планшете 5 в один ряд - 6ая в другой. Во вторых пож иконками перестали показываться надписи - что это за раздел. В третьих это выпадающее меню верхнего блока. Ну кому оно надо) На сайте то такого нет.Сидишь пилишь пилишь дизайн а тут все разрушено. Можно ли сделать так чтобы моб  отображал полную версию как компьютер?
Добрый день.
Адаптивное отображение сайта более удобно для большинства людей, крупные иконки разделов, скрывающееся меню при невозможности отображения по ширине экрана. Данное отображение сайта сделано исходя из определенных соображений.

Но если Вы все таки хотите отключить подобное отображение на мобильных устройствах, то в Редакторе шаблонов - HTML удалите строку
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />


#3 Heatray

Heatray

    Пользователь

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

Отправлено 24 Декабрь 2014 - 01:01

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

#4 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Декабрь 2014 - 03:06

В main.css найдите и удалите:
#header #welcome {
	display: none;
}

div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {
	display: none;
}


#5 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 24 Декабрь 2014 - 12:52

Тоже проблема с отображением сайта на сотовых, но проследовал вашим инструкциям и всё вроде ничего
Всё видно на картинке)
Как поправить все ошибки эти?

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

  • e_E-2qRwjwU.jpg


#6 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 24 Декабрь 2014 - 14:07

Просмотр сообщенияAntsupov Vyacheslav (24 Декабрь 2014 - 12:52) писал:

Тоже проблема с отображением сайта на сотовых, но проследовал вашим инструкциям и всё вроде ничего
Всё видно на картинке)
Как поправить все ошибки эти?
Здравствуйте, попробуйте такой вариант, но предварительно создайте бекап шаблона


найдите в main.css
/* Адаптивность шаблона ==============================*/
@media only screen and (min-width: 981px) and (max-width: 1220px) {
.inner {width:95%;}
}
@media only screen and (min-width: 990px) {
#header .flexslider li img.slide_img{display:block !important;}
#header .flexslider li .bigPic {display:none !important;}
#header.borderless {border-bottom:none;}
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
.inner {width:95%;}
#header_colapse .inner {background:none !important;}
#footer .column {width:22% !important;margin:10px !important;min-height:100px;}
div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .price {margin-bottom:25px;}
#column-left + #content div.prod_hold, #column-left + #content div.prod_hold_recent { margin:0px 11px 20px 11px;}
#toggle_switch {display:block;}
p img {max-width:100% !important;height:auto !important;}
.product-info .cart {height:auto;overflow:auto;}
.product-info .cart input[type="text"] {margin-bottom:10px;}
.orderStepName {font-size: 18px;}
.orderStepName:before {margin-right: 5px;}
table.form tr td:first-child {width: 40%;*width: 0px;}
#content .login-content .content {padding: 0;overflow: visible;}
.login-content table.form td {position: relative;width: 100%;display: block; padding: 4px 0;}
}
@media screen and (max-width: 785px) {
.orderStepName {font-size: 16px;}
table.form {table-layout: fixed;}
table.form tr td:first-child {width: auto;}
}
@media only screen and (max-width: 625px) {
.orderHeader {display: none !important;}
}
@media only screen and (min-width: 557px) and (max-width: 898px) {
.item-detail{width: 49%;}
}
@media only screen and (min-width: 480px) and (max-width: 556px) {
.item-detail {width: 40%;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#toggle_switch {display:none;}
.inner {width:86%;}
#header_colapse .inner {display:block !important;}
#header #cart {right: 0px;width: auto;float: none;}
.box-product, .product-list, .product-list2, .product-list3, .product-list4 {text-align:center;}
div.prod_hold, div.prod_hold_recent {margin:10px auto;}
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {display: none;}
div.prod_hold .prod-info-fly, div.prod_hold_recent .prod-info-fly{display: block;position: relative;padding: 0;bottom: 0;opacity: 1;width: 200px; }
div.prod_hold .prod-info-fly .name, div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .name, div.prod_hold_recent .prod-info-fly .price { display: block !important;}
#header .links {margin:0;}
#compareInfo {margin: 10px auto -20px;width: 100%;text-align: center;}
#header #welcome { display: none;}
#header #search { position:relative;clear:both;width:440px;margin-bottom: 19px;float: left;}
#header #search input {width:380px;}
#header #support {display:none;}
#header #cart h4, #header #cart #cart-total {display:block;}
#header #cart .content {top:35px;}
#header_colapse .inner { overflow: visible; padding:8px 0; background:none !important;}
#column-left { float:none; width:100%;}
#column-left .recent {display: none!important;}
#column-left + #content {margin: 0; }
#footer .column {width:100% !important;margin:10px 0 !important;min-height:100px;}
#footer .one_fourth {display: none;}
#footer .one_fourth.last {display: block;}
#tabs a {font-size:14px;}
.product-info .image {width:380px;}
.product-info .image img{max-width:100%; }
.product-info >.left, .product-info > .left + .right {float:none;margin: 0;}
img {max-width:100% !important;height:auto !important;}
textarea {width: 100%;}
#column-left div.prod_hold, #column-left div.prod_hold_recent {margin:0px 8px 20px 8px;}
.product-filter .view-mode label {display: none;}
#main_nav { display: none; }
.selectnav { display: block; margin:6px 0 0 0; width:100%; }
#column-left .box .box-heading:after {content: url("{ASSETS_IMAGES_PATH}downArrow.png?design=spring") no-repeat right center;position: absolute;right: 16px;top: 10px;cursor: pointer;}
#column-left .box .box-heading + .box-content {display: none;}
#column-left .box .box-heading.up:after {content: url("{ASSETS_IMAGES_PATH}UPArrow.png?design=spring") no-repeat right center;}
table.form {table-layout: fixed;}
#content .login-content .content {padding: 0;overflow: visible;}
.login-content h4, .login-content .right p {display: none;}
p.required {display: none;}
.login-content table.form td {position: relative;width: 100%;display: block;padding: 4px 0;}
.generally label:after {content: ""; display: block;clear: both;}
}
@media only screen and (max-width: 480px) {
h2 {font-size: 24px;}
.inner {width:80%;}
#header_colapse .inner {display:block !important;}
#toggle_switch {display:none;}
#header .links {margin:0;}
#compareInfo {margin-left:0px;float: left;}

#header #search {position:relative;clear:both;width:100%;margin-bottom:10px;}
#header #search input {width:70%;}
#header #support {display:none;}
#header #logo {margin: 0;}
#header #cart{ width: 98%; min-width: 98%;float: none;margin-bottom: 10px;}
#header #cart .heading {padding: 0 0 0 46px;}
#header #cart .cart_circle {right: auto; left: 0;}
#header #cart h4, #header #cart #cart-total {display:block;text-align: left !important;}
#header #cart .content {top:35px;}
#header_colapse .inner {overflow:visible;padding:8px 0;background:none !important;}
#main_nav { display: none; }
.selectnav { display: block; margin:6px 0 0 0; width:100%; }
#column-left {float:none;width:100%;}
#column-left .recent {display: none!important;}
#column-left + #content {margin: 0;}
.box-product, .product-list, .product-list2, .product-list3, .product-list4 {text-align:center;}
div.prod_hold, div.prod_hold_recent {margin:10px auto;width: 90%;}
div.prod_hold > div .prod-info-fly, div.prod_hold_recent > div .prod-info-fly {width: 100%;}

div.prod_hold .prod-info-fly, div.prod_hold_recent .prod-info-fly {display: block;position: relative;padding: 0;bottom: 0;opacity: 1; }
div.prod_hold .prod-info-fly .name, div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .name, div.prod_hold_recent .prod-info-fly .price{display: block !important;}
.item-detail {width: 100%;}
#footer .column {width:100% !important;margin:10px 0 !important;min-height:100px;}
#footer .one_fourth {display: none;}
#footer .one_fourth.last {display: block;}
#tabs a {font-size:12px;padding:10px;}
.category-info {padding: 10px 0;}
.category-info .left {float:none;}
.category-info .right {margin: 10px 0 0 0; padding: 0;}
.product-info .image {width:260px;}
.product-info .image img{max-width:100%; }
.product-info >.left, .product-info > .left + .right {float:none;margin: 0;}
.login-content .left, .login-content .right {width:95%;float:left;margin-bottom:10px;}
img {max-width:100% !important;height:auto !important;}
textarea {width: 100%;}
#column-left .box .box-heading:after {content: url("{ASSETS_IMAGES_PATH}downArrow.png?design=spring") no-repeat right center;position: absolute;right: 16px;top: 10px;cursor: pointer;}
#column-left .box .box-heading + .box-content {display: none;}
#column-left .box .box-heading.up:after {content: url("{ASSETS_IMAGES_PATH}UPArrow.png?design=spring") no-repeat right center;}
table.form td {position: relative;width: 100%;display: block;padding: 4px 0;}
#content .login-content .content {padding: 10px 0;overflow: visible;}
p.required {display: none;}
#content .buttons .left {display: none;}
}
/* /END адаптивность шаблона ======================================================*/

и удалите


далее найдите
#container {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
background: url(2.gif);
overflow: hidden;
}
замените на

#container {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
background: url(2.gif);
overflow: inherit;
}


#7 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 24 Декабрь 2014 - 14:23

ничего не изменилось

#8 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Декабрь 2014 - 01:15

на данный момент у вас отсутствуют изменения, предложенные в посте #6

#9 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 25 Декабрь 2014 - 09:17

Сделал замену как написано в посту #6

1)вот до изменения по посту #6  До.jpg

1) после ( название встала на шапку, но логотип также смещён, корзина сместилась, в подвале последний столбик сместился) после.jpg

#10 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 25 Декабрь 2014 - 17:46

Кто-нибудь поможет? Люююди)

#11 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Декабрь 2014 - 03:45

Отметите последние изменения, они отключают адаптивность, лучше сами элементы поправить, в main.css найдите:
#header #logo {
	clear: both;
	float: left;
	margin: -115px 12px 12px -100px;
	z-index: 999999;
}
замените на:
#header #logo {
	clear: both;
	float: left;
	margin: 0;
	z-index: 99;
}

Далее в шаблоне HTML найдите:
<div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=spring" title="" alt=""></a></div>
   

перенесите данный блок поставив после:
<div class="borderless" id="header">
		<div id="header_colapse">
		  <div class="inner" id="togglerone">
		   


#12 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 26 Декабрь 2014 - 07:23

А что значит перенести? данный блок.
Я просто после того как нашёл код в HTML поставил ниже него код  <divclass="borderless"id="header">
<div id="header_colapse">
<div class="inner" id="togglerone">

Получилось вот так(

Логотип вместился вниз, корзина опять не так стоит и надпись Алл Инклюзив опять смещена..
Адаптивность вернул..

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

  • pneGGx93qg0.jpg


#13 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 26 Декабрь 2014 - 10:09

перенести - значит удалить из исходного места и вставить в новое (указанное в инструкции)
в старом же месте, этого кода уже быть не должно.

#14 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 26 Декабрь 2014 - 10:32

в htmL я нашёл код <div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=spring" title="" alt=""></a></div>
, а вот куда его нужно перенести , я не нашёл этого кода в HTML
или нужно код вписать в HTML и потом только после этого вставить тот код, который я находил предварительно

#15 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Декабрь 2014 - 01:18

<div id="header" class="borderless">
		<div id="header_colapse">
		  <div id="togglerone" class="inner">
шаблон HTML строка 65-67

#16 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 27 Декабрь 2014 - 11:54

вотч то получается((((

что делать... помогите...

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

  • eU3kRaXNwjc.jpg


#17 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 27 Декабрь 2014 - 12:10

Просмотр сообщенияAntsupov Vyacheslav (27 Декабрь 2014 - 11:54) писал:

вотч то получается((((

что делать... помогите...
Здравствуйте, попробуйте такой вариант
найдите в main.css

body {
font-size: 14px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 19px;
color: #999999;
text-align: left;
}

замените на

body {
font-size: 14px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 19px;
color: #999999;
text-align: left;
background: #000;
}


#18 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 27 Декабрь 2014 - 12:29

не могу найти этот код...

#19 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 27 Декабрь 2014 - 12:32

Просмотр сообщенияAntsupov Vyacheslav (27 Декабрь 2014 - 12:29) писал:

не могу найти этот код...
Здравствуйте. В main.css 16-ая строка.

#20 Antsupov Vyacheslav

Antsupov Vyacheslav

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

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

Отправлено 27 Декабрь 2014 - 12:43

не помогло.. в сафари OmqcUEfDhtA.jpg

в мобильной опере по лучше отображается
но что в Сафари что В мобильной опере с корзиной беда. 123.jpg





Темы с аналогичным тегами моб, ильная версия андроид

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

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