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


Мобильная Версия Сайта


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

#1 288olia

288olia

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

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

Отправлено 03 Март 2016 - 13:59

Добрый день!

Несколько вопросов по мобильной версии сайта.

1. Как изменить шрифт мобильной версии на Open Sans?
2. Как убрать форму поиска с мобильной версии сайта?
3. Как изменить цвета главного меню для мобильной версии на такие же, как на основной?

Изображение

#2 RedHead

RedHead

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

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

Отправлено 03 Март 2016 - 14:39

Просмотр сообщения288olia (03 Март 2016 - 13:59) писал:

Добрый день!

Несколько вопросов по мобильной версии сайта.

1. Как изменить шрифт мобильной версии на Open Sans?
2. Как убрать форму поиска с мобильной версии сайта?
3. Как изменить цвета главного меню для мобильной версии на такие же, как на основной?

Здравствуйте. В шаблоне style.css в блоке
@media only screen and (max-width: 479px) {
найдите строку:
.contacts {float: none;margin: 5px 5px 10px 5px;}
(под номером примерно №1178)
замените ее на:
.contacts {float: none;margin: 5px 5px 10px 5px; font-family: 'Open Sans';}
.phone  {font-family: 'Open Sans';}

чуть ниже строку:
#search{display: block;position: relative;float: left;top: 0;right: 0;width: 220px;}
замените на:
#search{display: none;position: relative;float: left;top: 0;right: 0;width: 220px;}

строку:
.shopping_cart_block {float:right;position: relative;top: 0;right: 0;}
замените на
.shopping_cart_block {float:left;position: relative;top: 0;right: 0;}

.nav-container .nav_block_head_field{width:250px;padding-left:10px;padding-right: 10px;background-color: #000000;float:left;height:36px;color: #868686;outline: none;text-decoration: none;line-height:36px;cursor:pointer}
замените на:
.nav-container .nav_block_head_field{width:250px;padding-left:10px;padding-right: 10px;background-color: #fff;float:left;height:36px;color: #316a2a;outline: none;text-decoration: none;line-height:36px;cursor:pointer}

.nav-container .menu_block_dropdown{background-color: #000;list-style: none;margin: 0;padding: 15px 0 0 0;width: 300px;display:none;position:absolute;top:36px;left:0;z-index:99999;}
замените на:
 .nav-container .menu_block_dropdown{background-color: #f0faeb;list-style: none;margin: 0;padding: 15px 0 0 0;width: 300px;display:none;position:absolute;top:36px;left:0;z-index:99999;border: 1px solid #316a2a;}

.nav-container .menu_block_head_button{background: url('http://s35510.storeland.net/select-icons1.png?design=movement') 10px 15px no-repeat #000;display: block;float:left;height: 36px;outline: none;width: 30px;cursor:pointer}
замените на:
.nav-container .menu_block_head_button{background: url('http://s35510.storeland.net/select-icons1.png?design=movement') 10px 15px no-repeat #316a2a;display: block;float:left;height: 36px;outline: none;width: 30px;cursor:pointer}

.nav-container .menu_block_dropdown .et_categ_box a {display: block;outline: none;height:auto;color: #fff;text-decoration: none;text-transform:none;font-size:12px;float:none;padding:6px 0 6px 10px;border-bottom: dotted 1px #515151;line-height: 18px;font-weight:bold}
на:
.nav-container .menu_block_dropdown .et_categ_box a {display: block;outline: none;height:auto;color: #000;text-decoration: none;text-transform:none;font-size:12px;float:none;padding:6px 0 6px 10px;border-bottom: dotted 1px #515151;line-height: 18px;font-weight:bold}


#3 288olia

288olia

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

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

Отправлено 04 Март 2016 - 00:18

Просмотр сообщенияRedHead (03 Март 2016 - 14:39) писал:

Здравствуйте. В шаблоне style.css в блоке
@media only screen and (max-width: 479px) {
найдите строку:
.contacts {float: none;margin: 5px 5px 10px 5px;}
(под номером примерно №1178)
замените ее на:
.contacts {float: none;margin: 5px 5px 10px 5px; font-family: 'Open Sans';}
.phone {font-family: 'Open Sans';}

чуть ниже строку:
#search{display: block;position: relative;float: left;top: 0;right: 0;width: 220px;}
замените на:
#search{display: none;position: relative;float: left;top: 0;right: 0;width: 220px;}

строку:
.shopping_cart_block {float:right;position: relative;top: 0;right: 0;}
замените на
.shopping_cart_block {float:left;position: relative;top: 0;right: 0;}

.nav-container .nav_block_head_field{width:250px;padding-left:10px;padding-right: 10px;background-color: #000000;float:left;height:36px;color: #868686;outline: none;text-decoration: none;line-height:36px;cursor:pointer}
замените на:
.nav-container .nav_block_head_field{width:250px;padding-left:10px;padding-right: 10px;background-color: #fff;float:left;height:36px;color: #316a2a;outline: none;text-decoration: none;line-height:36px;cursor:pointer}

.nav-container .menu_block_dropdown{background-color: #000;list-style: none;margin: 0;padding: 15px 0 0 0;width: 300px;display:none;position:absolute;top:36px;left:0;z-index:99999;}
замените на:
.nav-container .menu_block_dropdown{background-color: #f0faeb;list-style: none;margin: 0;padding: 15px 0 0 0;width: 300px;display:none;position:absolute;top:36px;left:0;z-index:99999;border: 1px solid #316a2a;}

.nav-container .menu_block_head_button{background: url('http://s35510.storeland.net/select-icons1.png?design=movement') 10px 15px no-repeat #000;display: block;float:left;height: 36px;outline: none;width: 30px;cursor:pointer}
замените на:
.nav-container .menu_block_head_button{background: url('http://s35510.storeland.net/select-icons1.png?design=movement') 10px 15px no-repeat #316a2a;display: block;float:left;height: 36px;outline: none;width: 30px;cursor:pointer}

.nav-container .menu_block_dropdown .et_categ_box a {display: block;outline: none;height:auto;color: #fff;text-decoration: none;text-transform:none;font-size:12px;float:none;padding:6px 0 6px 10px;border-bottom: dotted 1px #515151;line-height: 18px;font-weight:bold}
на:
.nav-container .menu_block_dropdown .et_categ_box a {display: block;outline: none;height:auto;color: #000;text-decoration: none;text-transform:none;font-size:12px;float:none;padding:6px 0 6px 10px;border-bottom: dotted 1px #515151;line-height: 18px;font-weight:bold}

Спасибо за ответ. Частично получилось.

Скажите, пожалуйста, можно ли вообще отключить мобильные версии сайта для телефона и планшета? чтобы отображалась всегда полная версия?
Если да, пожалуйста, пришлите инструкцию. Полагаю, это обойдется меньшей кровью, чем править все недочеты мобильных версий.

#4 Vaccina

Vaccina

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

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

Отправлено 04 Март 2016 - 02:11

В style.css найдите:
body {background: #fff;color: #000; margin: 0px;font-family: 'Open Sans';height: 100%;}

замените на:
body {background: #fff;color: #000; margin: 0px;font-family: 'Open Sans';height: 100%;min-width:1024px;}

Далее найдите и удалите:
@media only screen and (min-width: 1200px) {
  .container {width: 1180px;}
  .flexslider .caption .title_block a {font-size: 40px;line-height: 30px;}
  .feedbackForm .left {margin-right: 30px;}
  .feedbackForm  #feedback_name, .contentContainer .left  #feedback_email {width: 188px;}
  .feedbackForm  #feedback_file {width: 218px;}
  /*#carousel_specials .product,
  #carousel_newproducts .product,
  #carousel_bestsellers .product,
  #also_purchased .product {width: 200px;}*/
}
@media only screen and (min-width: 960px) and (max-width: 1200px) {
  .container { width: 939px; }
  .container .two.columns					 { width: 100px; }
  .container .four.columns					{ width: 209px; }
  .container .five.columns					{ width: 280px; }
  .container .twelve.columns				  { width: 680px; }
 
  .fluid-container  {position: relative;height:500px;}
  .camera_wrap {height:500px !important;}
  .header_bar .logo {width: 219px;}
  .header_bar h1 {margin-left: 259px;font-size: 18px;line-height: 24px;}
  .header_bar #search {margin-left: 259px;}
  .home #header {margin-left: -480px;}
  .shopping_cart .cart_link { display: none !important;}
  #footer .container .four.columns {border: none; margin-top: 20px;}
  .product-list3 .four.columns, .product-list4 .four.columns {width: 100%;}
  .nav-container {width: 100%; margin-left: 0;}
  .product-recent .product-name {height: 40px;overflow: hidden;}
  .product-recent .product-name a {font-size: 10px;height: 30px;overflow: hidden;}
  .product-recent .buy_button {padding: 10px 5px;font-size: 10px;}
  .content-form {height: 320px;}
  #footer .feedbackForm input {width: 165px;}
  #footer .feedbackForm textarea {width: 100%;}
 
  /*#carousel_specials .product,
  #carousel_newproducts .product,
  #carousel_bestsellers .product,
  #also_purchased .product {width: 208px;}*/
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .hidden-tablet {display: none !important;}
  .container								  { width: 747px;}
  .container .columns						 { margin-left: 10px; margin-right: 10px;  }
  .columns.alpha			   { margin-left: 0; margin-right: 10px; }
  .columns.omega			   { margin-right: 0; margin-left: 10px; }
  .alpha.omega								{ margin-left: 0; margin-right: 0; }
  .container .two.columns					 { width: 76px; }
  .container .four.columns					{ width: 172px; }
  .container .five.columns					{ width: 220px; }
  .container .twelve.columns				  { width: 542px; margin-top: 15px;}
 
  .fluid-container  {position: relative;height:400px;}
  .camera_wrap {height:400px !important;}
  .camera_caption {display: none !important;}
 
  .carousel_also_purchased .jcarousel-control-prev {left: 50%; margin-left: -270px;}
  .carousel_also_purchased .jcarousel-control-next {right: 50%; margin-right: -270px;}
 
  .header_bar .logo {width: 182px;}
  .header_bar h1 {margin-left: 202px;font-size: 18px;line-height: 24px;}
  .header_bar #search {margin-left: 202px;}
  .home #header {margin-left: -384px;}
  .product_img_wrapper {width: 44% !important;}
  #search {width: 220px;position: absolute;top: 65px;right: 90px;}
  .shopping_cart_block {top: 65px;}
  .promo_block li {margin: 10px 5px 5px 5px;width: 115px;}
  .infoBox { margin: 0 0 10px 0;}
  .box-heading {padding: 6px 15px 6px 37px;}
  .box-heading a {font-size: 14px;}
  .wishlist, .compare {margin-left: 20px;}
  #footer .container .four.columns {border: none; margin-top: 20px;width: 155px;}
  .product-list3 .four.columns, .product-list4 .four.columns {width: 100%;}
  .product-list3 .four.columns .product-tools, .product-list4 .four.columns .product-tools {width: 180px;padding-left: 10px;}
  .product-list3 .four.columns .item-detail, .product-list4 .four.columns .item-detail {margin-right: 190px;}
  .product-recent .product-name {height: 40px;overflow: hidden;}
  .product-recent .product-name a {font-size: 10px;height: 30px;overflow: hidden;}
  .product-recent .buy_button {padding: 10px 5px;font-size: 10px;}
  .content-form {height: 360px;}
  .contentContainer .left {width:49%;}
  .shopping-cart-table .qty-button-down {margin-left: 3px;}
  #footer .left {width: 180px;}
  #feedback_file {width: 160px;}
  #feedback_message {width: 100%;}
  #payment_services span{margin-right: 3px}
  #footer .feedbackForm input {width: 111px;}
  #footer .feedbackForm textarea {width: 100%;}
 
  .product-recent .wrapper-hover {width: 90px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .hidden-tablet {display: none !important;}
  .container {width: 460px;}
  .container .column,  .container .columns {margin-left: 5px;margin-right: 5px;}
  .columns.alpha {margin-left: 0;margin-right: 5px;}
  .columns.omega {margin-right: 0;margin-left: 5px;}
  .alpha.omega {margin-left: 0;margin-right: 0;}
  .container .two.columns {width: 200px;}
  .container .four.columns {width: 100%;}
  .container .five.columns, .container .twelve.columns {width: 460px;margin:0;}
 
  .fluid-container  {position: relative;height:380px;}
  .camera_wrap {height:380px !important;}
  .camera_caption {display: none !important;}
 
  #shopping_cart_mini {display: none !important;}  
  .header_bar {display: none !important;}
  .home #header {margin-left: -220px;}
  .logo {width: 32%;}
  .contacts {position: absolute;right: 0;}
  #search{display: block;position: relative;top: 120px;left: 0;width: 400px;}
  #search input[type="text"]{position: absolute;left: 0px;}
  #search input[type="submit"] {position: absolute;right: 0;height: 40px;}
  .promo_block li {width: 25%;}
  #footer .container .four.columns {border: none; margin: 20px 0 0 0;padding-left: 0;padding-right: 0;}
  #footer .container .four.columns .left {margin-left: 16px;}
  .breadcrumbs_box {margin: 15px 0;}
  .product-list3 .four.columns, .product-list4 .four.columns {width: 100%;}
  .product-list3 .four.columns .item-detail .column, .product-list4 .four.columns .item-detail .column {display: block;margin: 0;padding: 10px 5px;}
  .product-list3 .four.columns .product-tools, .product-list4 .four.columns .product-tools {margin: 0;padding: 0;border:none;float: none;}
  .views label {display: none;}
  .shopping_cart_block {right: 0px; top: 120px;}
  .img_link_wrapper{display: none;}
  #tabs a {display: block !important;margin-right: 0 !important;margin-top: 1px;}
  #header .nav-container{text-align:left;background: none;margin-top: 75px}
  #header .nav-container #menu_block_head{display: block;margin-top: 10px;}
  #header .nav-container  .nav_block_head_field{width: 420px;padding-left:10px;background-color: #000000;float:left;height:36px;color: #fff;outline: none;text-decoration: none;line-height:36px;cursor:pointer}
  #header .nav-container .menu_block_head_button{background: url('http://s35510.storeland.net/select-icons1.png?design=movement') 10px 15px no-repeat #000;display: block;float:left;height: 36px;outline: none;width: 30px;cursor:pointer}
  #header .nav-container .menu_block_dropdown{background-color: #000;list-style: none;margin: 0;padding: 15px 0 0 0;width: 460px;display:none;position:absolute;top:36px;left:0;z-index:99999;}
  #header .nav-container .menu_block_dropdown .et_categ_box{padding:0 10px 20px}
  #header .nav-container .menu_block_dropdown .cat-name{float:none;display:block;border:none}
  #header .nav-container .menu_block_dropdown .et_categ_box a {display: block;outline: none;height:auto;color: #fff;text-decoration: none;text-transform:none;font-size:12px;float:none;padding:6px 0 6px 10px;border-bottom: dotted 1px #515151;line-height: 18px;font-weight:bold}
  #header .nav-container .visible_on{display: block}
  #header .cat-name, .sub-cat-name, .subsub-cat-name{float: none;}
  #header .nav-container .menu_block_dropdown .et_categ_box .sub-cat-name a,
  #header .nav-container .menu_block_dropdown .et_categ_box .subsub-cat-name a{color: #fff !important;font-weight: normal;}
  #header .nav-container .menu_block_dropdown .et_categ_box .sub-cat-name a:hover,
  #header .nav-container .menu_block_dropdown .et_categ_box .subsub-cat-name a:hover{text-decoration: underline}
  #header .nav-container .menu_block_dropdown .et_categ_box .cat-name a{border: none}
  #header .nav-container .menu_block_dropdown .et_categ_box a:hover{border: none;background-color:#316a2a;color: #fff !important;}
  .home .promo_block {margin-bottom: 10px;}
 
  .header_favorites,
  .header_specials,
  .header_newproducts,
  .header_bestsellers,
  .header_also_purchased {background: #eee;position: relative;margin-bottom: 18px;text-align: center;height: 36px;}
 
  .header_favorites h2,
  .header_specials h2,
  .header_newproducts h2,
  .header_bestsellers h2,
  .header_also_purchased h2 {background: #fff;color: #525252;font-family: 'Open Sans';font-size: 20px;text-transform: uppercase;display: inline-block;padding: 0 50px;height: 36px;}
 
  .carousel_favorites .jcarousel-control-prev {left: 50%; margin-left: -150px;}
  .carousel_favorites .jcarousel-control-next {right: 50%; margin-right: -150px;}
 
  .carousel_specials .jcarousel-control-prev {left: 50%; margin-left: -150px;}
  .carousel_specials .jcarousel-control-next {right: 50%; margin-right: -150px;}
 
  .carousel_newproducts .jcarousel-control-prev {left: 50%; margin-left: -100px;}
  .carousel_newproducts .jcarousel-control-next {right: 50%; margin-right: -100px;}
 
  .carousel_bestsellers .jcarousel-control-prev {left: 50%; margin-left: -150px;}
  .carousel_bestsellers .jcarousel-control-next {right: 50%; margin-right: -150px;}
 
  .carousel_also_purchased .jcarousel-control-prev {left: 50%; margin-left: -170px;}
  .carousel_also_purchased .jcarousel-control-next {right: 50%; margin-right: -170px;}
 
  .product_info_page_left .infoBox {display: none;}
  .infoBox.infoBoxCategory {display: block;position: fixed;bottom: 0;width: 460px;z-index: 100;margin: 0 0 0 -5px;}
  .infoBox.infoBoxCategory .box-heading {background-color: #999;bottom: 0;position: absolute;width: 405px;z-index: 100;}
  .infoBox.infoBoxCategory .infoBoxContents {display: none;margin-bottom: 40px;background: #fff;}
  .prod_info_price{width:auto;text-align: left}
  .prod_info_name h1{margin-bottom: 0}
  .product_info_wrapper{clear: both;margin-left:0;padding-top: 20px}
  #header input[type="text"], #header input[type="password"], #header input[type="email"], #header textarea, #header select{margin: 0;width: 385px;}
  .prod_info_price{width:auto;}
  .product_img_wrapper, .product_info_wrapper{float: none;margin: 0 auto;width: 100%}
  .right{padding: 0;}
  .content-form {width: 92%;padding: 4%;margin: 10px 0 10px 0 !important;}
  .feedbackForm .left {padding: 0;}
  .feedbackForm textarea {width: 390px;}
  .row{position: relative;display: block;clear: both;}
  #header .buy_button{float: none !important;margin: 0 auto !important;}
  .title {background: #fff;}
  .title h2 {padding: 0;width:100%;}
  #footer .feedbackForm .buttons .buy_button {float: left;margin-left: -1px;}
 
  .shopping-cart-table thead td {padding: 0 10px;white-space: normal;line-height: 20px;}
  .shopping-cart-table .qty-button-down {margin-left: 0;}
  .shopping-cart-table .qty {width: 27px;}
 
}
@media only screen and (max-width: 479px) {
  .hidden-phone {display: none !important;}
  .container { width: 300px; }
  .container .columns,
  .container .column { margin: 0; }
  .container .two.columns,
  .container .four.columns,
  .container .five.columns,
  .container .twelve.columns  { width: 300px; }
 
  .fluid-container  {position: relative;height:380px;}
  .camera_wrap {height:380px !important;}
  .camera_caption {display: none !important;}
 
  #shopping_cart_mini {display: none !important;}
  .header_bar {display: none !important;}
  .home #header {margin-left: -150px;}
  .logo {width: 290px;float: none;padding: 5px;}
  .contacts {float: none;margin: 5px 5px 10px 5px;}
  #search{display: block;position: relative;float: left;top: 0;right: 0;width: 220px;}
  #search input[type="text"] {float: left;margin-bottom: 0px;right: 0px;}
  #search input[type="submit"] {float: right;margin-bottom: 0px;right: -20px;height: 40px;}
  .promo_block li {width: 55px;height:55px;margin: 10px; padding: 0;}
  .promo_block li h3, .promo_block li p {display: none;}
  #tabs a {display: block !important;margin-right: 0 !important;margin-top: 1px;}
  #footer .container .four.columns {border: none; margin: 20px 0 0 0;padding-left: 0;padding-right: 0;}
  #footer .container .four.columns .left {margin-left: 16px;}
  #footer .four.columns h3 {cursor: pointer;}
  #footer .four.columns .open-close{display:block}
  #footer .wrapper{display:none;margin-top:20px}
  #footer .wrapper.unfold{display:block}
  .product-list3 .four.columns, .product-list4 .four.columns {width: 100%;}
  .product-list3 .four.columns .prod_image, .product-list4 .four.columns .prod_image {display: block;width: 100%;text-align: center;}
  .product-list3 .four.columns .prod_image img, .product-list4 .four.columns .prod_image img {max-width: 100%;}
  .product-list3 .four.columns .item-detail, .product-list4 .four.columns .item-detail {display: block;margin:0; padding: 0;width: 100%;text-align: center;}
  .product-list3 .four.columns .item-detail .column, .product-list4 .four.columns .item-detail .column {display: block;margin: 0;padding: 10px 5px; text-align: left;}
  .product-list3 .four.columns .product-tools, .product-list4 .four.columns .product-tools {display: block;float: none; width: 100%;padding: 0;border: none;text-align: left;}
  .product-list3 .four.columns .product-tools .product-price {text-align: center;}
  .product-tools form, .wishlist, .compare {text-align: center;margin-left: 0;}
  .img_link_wrapper{display: none !important}
  #header .nav-container .visible_on {display: block;}
  .nav-container{text-align:left;background: none;margin-top: 0}
  .nav-container #menu_block_head{display: block;margin-top: 10px}
  .nav-container .nav_block_head_field{width:250px;padding-left:10px;padding-right: 10px;background-color: #000000;float:left;height:36px;color: #868686;outline: none;text-decoration: none;line-height:36px;cursor:pointer}
  .nav-container .menu_block_head_button{background: url('http://s35510.storeland.net/select-icons1.png?design=movement') 10px 15px no-repeat #000;display: block;float:left;height: 36px;outline: none;width: 30px;cursor:pointer}
  .nav-container .menu_block_dropdown{background-color: #000;list-style: none;margin: 0;padding: 15px 0 0 0;width: 300px;display:none;position:absolute;top:36px;left:0;z-index:99999;}
  .nav-container .menu_block_dropdown .et_categ_box{padding:0 10px 20px}
  .nav-container .menu_block_dropdown .cat-name{float:none;display:block;border:none}
  .nav-container .menu_block_dropdown .et_categ_box a {display: block;outline: none;height:auto;color: #fff;text-decoration: none;text-transform:none;font-size:12px;float:none;padding:6px 0 6px 10px;border-bottom: dotted 1px #515151;line-height: 18px;font-weight:bold}
  .cat-name, .sub-cat-name, .subsub-cat-name{float: none;}
  .nav-container .menu_block_dropdown .et_categ_box .cat-name a{border: none}
  .nav-container .menu_block_dropdown .et_categ_box a:hover{border: none;background-color:#316a2a;color: #fff !important;}
 
  .product_info_page_left .infoBox {display: none;}
  .infoBox.infoBoxCategory {display: block;position: fixed;bottom: 0;width: 300px;z-index: 100;margin: 0 0 0 -5px;}
  .infoBox.infoBoxCategory .box-heading {background-color: #999;bottom: 0;position: absolute;width: 245px;z-index: 100;}
  .infoBox.infoBoxCategory .infoBoxContents {display: none;margin-bottom: 40px;background: #fff;}
 
  .shopping_cart_block {float:right;position: relative;top: 0;right: 0;}
  #shopping_cart_mini {left: 0}
  button.button{line-height: 14px;padding-top: 3px;padding-bottom: 3px}
 
  .title {background: #fff;}
  .title h2 {padding: 0;width:100%;}
  .header_favorites,
  .header_specials,
  .header_newproducts,
  .header_bestsellers,
  .header_also_purchased {background: #eee;position: relative;margin-bottom: 18px;text-align: center;height: 37px;}
 
  .header_favorites h2,
  .header_specials h2,
  .header_newproducts h2,
  .header_bestsellers h2,
  .header_also_purchased h2 {background: #fff;color: #525252;font-family: 'Open Sans';font-size: 16px;text-transform: uppercase;display: inline-block;padding: 0 20px;height: 37px;line-height: 37px;}
 
  .carousel_favorites .jcarousel-control-prev {left: 50%; margin-left: -130px;}
  .carousel_favorites .jcarousel-control-next {right: 50%; margin-right: -130px;}
 
  .carousel_specials .jcarousel-control-prev {left: 50%; margin-left: -130px;}
  .carousel_specials .jcarousel-control-next {right: 50%; margin-right: -130px;}
 
  .carousel_newproducts .jcarousel-control-prev {left: 50%; margin-left: -90px;}
  .carousel_newproducts .jcarousel-control-next {right: 50%; margin-right: -90px;}
 
  .carousel_bestsellers .jcarousel-control-prev {left: 50%; margin-left: -110px;}
  .carousel_bestsellers .jcarousel-control-next {right: 50%; margin-right: -110px;}
 
  .carousel_also_purchased .jcarousel-control-prev {left: 50%; margin-left: -145px;}
  .carousel_also_purchased .jcarousel-control-next {right: 50%; margin-right: -145px;}
 
  #carousel_favorites ul li .product, #carousel_specials ul li .product, #carousel_newproducts ul li .product, #carousel_bestsellers ul li .product, #also_purchased ul li .product {width: 284px !important; margin: 0 3px;}
  .content-form {width: 92%;height: 360px;padding: 4%;margin-left: 0px !important;}
  .content-form .fieldKey .right {float: right;}
  .contentContainer textarea {width: 100%;}
 
  .prod_info_price{text-align: left}
  .prod_info_name h1{margin-bottom: 0}
  .product_info_wrapper{float: none; width: 100%;clear: both;margin-left:0;padding-top: 15px}
  .prod_info_price{width:auto;}
  .product_img_wrapper{margin: 0 auto;width: 100%;float: none;clear: both;}
  .right{float: none; /*width: 100%;padding-top: 0px;*/}
  .row{position: relative;display: block;clear: both;}
  #header .buy_button {float: none !important;margin: 0 auto 10px !important;} 
  .shopping-cart-table tr {border: 1px solid #cdcdcd;}
  .shopping-cart-table thead {display: none;}
  .shopping-cart-table td {display: block;width: 100%;padding: 5px 0;text-align: center !important;border: none;}
  .shopping-cart-table .results + td {width: 100%;}
  .shopping-cart-table a {margin: 0 5px;}
  .shopping-cart-table .qty-button-down {margin-left: 107px;}
  .shopping-cart-table tfoot {background: #eee;}
  .fieldKey .right {float: right;}
  #footer .feedbackForm .buttons .buy_button {float: left;margin-left: -1px;}
 
  #feedbackForm input[type="text"],  #feedbackForm input[type="email"] {width: 233px;}
  .feedbackForm .left {width: 100%;}
  .feedbackForm input[type="text"],  .feedbackForm input[type="email"] {width: 228px;}
  .feedbackForm textarea {width: 252px;}
 
 
}


#5 288olia

288olia

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

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

Отправлено 04 Март 2016 - 16:38

Большое спасибо за ответ! Получилось и стало значительно лучше.

Пожалуйста, помогите поправить шапку и подвал сайта.
Шапка сайта уехала влево. Часть информации оказалась скрытой, справа образовалось пустое место.
Изображение

В подвале пустое место справа.
Изображение

#6 Danil

Danil

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

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

Отправлено 04 Март 2016 - 16:47

Просмотр сообщения288olia (04 Март 2016 - 16:38) писал:

Большое спасибо за ответ! Получилось и стало значительно лучше.

Пожалуйста, помогите поправить шапку и подвал сайта.
Шапка сайта уехала влево. Часть информации оказалась скрытой, справа образовалось пустое место.
Изображение

В подвале пустое место справа.
Изображение
Здравствуйте.
Попробуйте сделать следующее:
в main.css найдите код
body {
	background: #fff;
	color: #000;
	margin: 0px;
	font-family: 'Open Sans';
	height: 100%;
	min-width: 1024px;
}
и замените на
body {
	background: #fff;
	color: #000;
	margin: 0px;
	font-family: 'Open Sans';
	height: 100%;
	min-width: 1200px;
}


#7 288olia

288olia

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

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

Отправлено 04 Март 2016 - 17:29

Большое спасибо! Помогло, теперь отображается корректно.
Респект за отличную службу поддержки :)

#8 Котуся

Котуся

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

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

Отправлено 19 Май 2016 - 10:50

Добрый день!

Помогите пожалуйста поправить мобильную версию сайта.

Добрый день!

Помогите поправить мобильную версию сайта
IMG_2882.PNG

и в подвале тоже

Я еще внимание хотела обратить, что внизу на серой панели высвечивается Отзывы вместо Каталога.

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

  • IMG_2882.PNG


#9 Юля123

Юля123

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

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

Отправлено 19 Май 2016 - 14:58

Просмотр сообщенияКотуся (19 Май 2016 - 10:50) писал:

Добрый день!

Помогите пожалуйста поправить мобильную версию сайта.

Добрый день!

Помогите поправить мобильную версию сайта


и в подвале тоже

Я еще внимание хотела обратить, что внизу на серой панели высвечивается Отзывы вместо Каталога.


Здравствуйте, в style.css найдите код:

  #footer .container .four.columns {border: none; margin: 20px 0 0 0;padding-left: 0;padding-right: 0; }

и замените на код:
  #footer .container .four.columns {border: none; margin: 20px 0 0 0;padding-left: 0;padding-right: 0; width: 100%;}

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

#10 Котуся

Котуся

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

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

Отправлено 19 Май 2016 - 15:13

Просмотр сообщенияЮля123 (19 Май 2016 - 14:58) писал:

Здравствуйте, в style.css найдите код:

#footer .container .four.columns {border: none; margin: 20px 0 0 0;padding-left: 0;padding-right: 0; }

и замените на код:
#footer .container .four.columns {border: none; margin: 20px 0 0 0;padding-left: 0;padding-right: 0; width: 100%;}

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

1. Шапка - номера телефонов наезжают на баннеры с прайс листом, схемой проезда, бланком распила.
Можно ли сделать так, чтобы в мобильной версии отражалось все друг под другом?

2. Внизу, выскакивает серая плашка ( на скринах ее видно) с надписью Отзывы, а надо бы Каталог.

3. В промоблоке текст наезжает друг на друга.

4.Когда заходишь в каталог, категории располагаются по левому краю, не отцентрованы.

5. Товар в категориях тоже находится по левому краю.

по футеру все получилось, спасибо большое

#11 Котуся

Котуся

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

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

Отправлено 20 Май 2016 - 08:56

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

#12 Юля123

Юля123

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

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

Отправлено 20 Май 2016 - 10:02

Просмотр сообщенияКотуся (19 Май 2016 - 15:13) писал:

1. Шапка - номера телефонов наезжают на баннеры с прайс листом, схемой проезда, бланком распила.
Можно ли сделать так, чтобы в мобильной версии отражалось все друг под другом?

2. Внизу, выскакивает серая плашка ( на скринах ее видно) с надписью Отзывы, а надо бы Каталог.

3. В промоблоке текст наезжает друг на друга.

4.Когда заходишь в каталог, категории располагаются по левому краю, не отцентрованы.

5. Товар в категориях тоже находится по левому краю.

по футеру все получилось, спасибо большое

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

#13 Котуся

Котуся

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

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

Отправлено 20 Май 2016 - 10:26

Спасибо большое, большинство проблем ушло))))

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

В категориях также.

Можно это поправить?

С Уважением,

.

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

  • IMG_2897 (1).PNG


#14 Юля123

Юля123

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

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

Отправлено 20 Май 2016 - 12:45

Просмотр сообщенияКотуся (20 Май 2016 - 10:26) писал:

Спасибо большое, большинство проблем ушло))))

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

В категориях также.

Можно это поправить?

С Уважением,

.

Произвела Вам изменения, они касались и мобильной версии и десктопной. Удалила полностью блок со слайдером, который у Вас не использовался, и при этом "ломал" всю верстку. Сейчас должно всё отображаться нормально.

#15 Котуся

Котуся

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

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

Отправлено 20 Май 2016 - 13:03

Спасибо огромущее просто!!!!
Все как надо))

Но есть один вопрос: у меня в товарах в некоторых вставлены в описании таблицы, и они некорректно отображаются в мобильной версии.
Как то можно это поправить?

#16 Юля123

Юля123

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

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

Отправлено 20 Май 2016 - 13:19

Просмотр сообщенияКотуся (20 Май 2016 - 13:03) писал:

Спасибо огромущее просто!!!!
Все как надо))

Но есть один вопрос: у меня в товарах в некоторых вставлены в описании таблицы, и они некорректно отображаются в мобильной версии.
Как то можно это поправить?

Пришлите пример страницы. Есть вариант решения - заменять одну таблицу на другую в мобильной версии. Придумайте только, как она должна отображаться.

#17 Котуся

Котуся

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

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

Отправлено 20 Май 2016 - 13:37

Просмотр сообщенияЮля123 (20 Май 2016 - 13:19) писал:

Пришлите пример страницы. Есть вариант решения - заменять одну таблицу на другую в мобильной версии. Придумайте только, как она должна отображаться.

Вот ссылка на страницу http://fanera003.ru/...yj#!prettyPhoto

А в таком же виде, только чуть меньше по ширине можно сделать?

#18 Юля123

Юля123

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

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

Отправлено 20 Май 2016 - 14:09

Просмотр сообщенияКотуся (20 Май 2016 - 13:37) писал:

Вот ссылка на страницу

А в таком же виде, только чуть меньше по ширине можно сделать?

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

#19 Котуся

Котуся

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

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

Отправлено 20 Май 2016 - 14:26

Просмотр сообщенияЮля123 (20 Май 2016 - 14:09) писал:

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

тогда без таблицы в мобильной версии

#20 Юля123

Юля123

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

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

Отправлено 20 Май 2016 - 15:18

Просмотр сообщенияКотуся (20 Май 2016 - 14:26) писал:

тогда без таблицы в мобильной версии

В main.css после кода:
@media only screen and (max-width: 479px) {
добавьте код:

.htmlDataBlock[itemprop="description"] table {
	display: none;
}





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

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