Сообщений в теме: 5

[Ольга 94]

Здравствуйте! Я тут упорненько занялась шаблоном, и изменения видела только на компьютере. Пару-тройку дней назад мобильная версия хоть и не была идеальной, но все же была похожа на мобильную) сейчас после смены множества пунктов в кодах у меня мобильная верстка вся слетела. Скажите есть ли возможность менять разметку мобильной версии в независимости от изменений в полной версии..и наоборот....Просто у меня например много добавлено чего не было в стандартном шаблоне и к сожалению  то что я добавляла выглядит не совсем корректно в мобильном варианте.....вот ссылка, тут примерно показано как выглядит сайт на устройствах.... http://webmark.com.u...oursize-shop.ru

[Юля123]

Ольга 94 (29 Апрель 2016 - 12:41) писал:

Здравствуйте! Я тут упорненько занялась шаблоном, и изменения видела только на компьютере. Пару-тройку дней назад мобильная версия хоть и не была идеальной, но все же была похожа на мобильную) сейчас после смены множества пунктов в кодах у меня мобильная верстка вся слетела. Скажите есть ли возможность менять разметку мобильной версии в независимости от изменений в полной версии..и наоборот....Просто у меня например много добавлено чего не было в стандартном шаблоне и к сожалению  то что я добавляла выглядит не совсем корректно в мобильном варианте.....вот ссылка, тут примерно показано как выглядит сайт на устройствах.... http://webmark.com.u...oursize-shop.ru

Посмотрела чем это вызвано - это повлияли изменения связанные в футером в корзине. А именно код:

html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
width:100%;
}
#main {
display: table-row;
height: 100%;
}

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

* {
  margin: 0;
  padding: 0;
}
.content {
  min-height: calc(100vh - 300px);
}

[Ольга 94]

Юля, спасибо, если посмотреть отображение на устройствах по этой ссылке, то вроде нормально стало, но вот в реальном времени смотрю на айфоне сайт и он выглядит не так как на сайте на этом. Я так подозреваю из за того что не адаптируется сетка на главной странице. (После слайдера)Можно его настроить, что бы она красиво отображалась на сайте?

[Юля123]

Ольга 94 (29 Апрель 2016 - 14:46) писал:

Юля, спасибо, если посмотреть отображение на устройствах по этой ссылке, то вроде нормально стало, но вот в реальном времени смотрю на айфоне сайт и он выглядит не так как на сайте на этом. Я так подозреваю из за того что не адаптируется сетка на главной странице. (После слайдера)Можно его настроить, что бы она красиво отображалась на сайте?

Давайте попробуем, в main.css после кода:

@media all and (max-width: 481px) {

добавила код:

	.block51,
  .block52,
  .block54,
  .block53 {
	width: auto !important;
	height: auto !important;
}
.hovereffect img {
	width: 100%;
	height: auto;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
	padding-left: 15px !important;
}
.col-lg-4.col-md-4.col-sm-4.col-xs-12 {
	padding-left: 15px;
}
.block54 {
	margin: 12px 0;
}

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

/*эффект при наведении мыши на товар*/
.item-inner:hover {z-index: 10;box-shadow: 0 2px 20px rgba(0,0,0, 0.25);border-color: transparent;border-radius: 0px;}

/*эффекты для блочной сетки*/
.hovereffect {
 
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #ffffff;
  margin: 12px 12px;
  margin-bottom: 0px;
  margin-left:0px;
}
.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 0px 12px;
 
}
.hovereffect img {
  display:  inline-block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  }
  .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 0;
}
 
.hovereffect:hover img {
  opacity: 0.8;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.block51 {
 
  display: inline-block;
  width: 370px;
  height: 370px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
  margin: 12px 12px; /*расстояние по краям*/
  margin-bottom: 0px; /*расстояние по краям*/
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
 
}
.block52 {
 
  display: inline-block;
  width: 752px;
  height: 370px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
  margin: 12px 12px; /*расстояние по краям*/
  margin-bottom: 0px; /*расстояние по краям*/
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
 
}
.block53 {
 
  display: inline-block;
  width: 376px;
  height: 740px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
 
 
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
}
.block54 {
 
  display: inline-block;
  width: 376px;
  height: 370px;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;/*расстояние по краям*/
  margin: 12px 12px; /*расстояние по краям*/
  margin-bottom: 0px; /*расстояние по краям*/
  margin-left:0px; /*расстояние по краям*/
  margin-top:0px; /*расстояние по краям*/
 
}

.img_block.container .col-lg-8.col-md-8.col-sm-8.col-xs-12 {
		padding-right: 0px !important;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
		padding-left: 0px !important;
}
/*
.img_block .col-lg-8  {
		padding: 0px 10px;
}
*/

перенесла перед кодом:

/******************************************************************************
  Адаптивная часть
*******************************************************************************/

Посмотрите, пожалуйста, устраивает ли Вас такой вариант.

[Ольга 94]

Юля123 (29 Апрель 2016 - 15:30) писал:

Давайте попробуем, в main.css после кода:

@media all and (max-width: 481px) {

добавила код:

.block51,
.block52,
.block54,
.block53 {
width: auto !important;
height: auto !important;
}
.hovereffect img {
width: 100%;
height: auto;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 15px !important;
}
.col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 15px;
}
.block54 {
margin: 12px 0;
}

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

/*эффект при наведении мыши на товар*/
.item-inner:hover {z-index: 10;box-shadow: 0 2px 20px rgba(0,0,0, 0.25);border-color: transparent;border-radius: 0px;}

/*эффекты для блочной сетки*/
.hovereffect {

width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #ffffff;
margin: 12px 12px;
margin-bottom: 0px;
margin-left:0px;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 0px 12px;

}
.hovereffect img {
display: inline-block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 0;
}

.hovereffect:hover img {
opacity: 0.8;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.block51 {

display: inline-block;
width: 370px;
height: 370px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/
margin: 12px 12px; /*расстояние по краям*/
margin-bottom: 0px; /*расстояние по краям*/
margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/

}
.block52 {

display: inline-block;
width: 752px;
height: 370px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/
margin: 12px 12px; /*расстояние по краям*/
margin-bottom: 0px; /*расстояние по краям*/
margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/

}
.block53 {

display: inline-block;
width: 376px;
height: 740px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/


margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/
}
.block54 {

display: inline-block;
width: 376px;
height: 370px;
float: left;
overflow: hidden;
position: relative;
text-align: center;/*расстояние по краям*/
margin: 12px 12px; /*расстояние по краям*/
margin-bottom: 0px; /*расстояние по краям*/
margin-left:0px; /*расстояние по краям*/
margin-top:0px; /*расстояние по краям*/

}

.img_block.container .col-lg-8.col-md-8.col-sm-8.col-xs-12 {
	 padding-right: 0px !important;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
	 padding-left: 0px !important;
}
/*
.img_block .col-lg-8 {
	 padding: 0px 10px;
}
*/

перенесла перед кодом:

/******************************************************************************
Адаптивная часть
*******************************************************************************/

Посмотрите, пожалуйста, устраивает ли Вас такой вариант.

Юлия, сейчас конечно получилось намного лучше чем было) Скажите а можно сделать во так(скрин)
И еще почему то маштабируется размер мобильного сайта, можно убрать, что бы пальчиками на сенсоре нельзя было его двигать...

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

• 

[Юля123]

Ольга 94 (04 Май 2016 - 07:17) писал:

Юлия, сейчас конечно получилось намного лучше чем было) Скажите а можно сделать во так(скрин)
И еще почему то маштабируется размер мобильного сайта, можно убрать, что бы пальчиками на сенсоре нельзя было его двигать...

В main.css найдите код:

.block51,
.block52,
.block54,
.block53 {
width: auto !important;
height: auto !important;
}
.hovereffect img {
width: 100%;
height: auto;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 15px !important;
}
.col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 15px;
}
.block54 {
margin: 12px 0;
}

и замените на код:

.block51, .block54, .block53 {
width: 46%;
height: auto !important;
}

.block52 {
width: auto;
height: auto;
}
.hovereffect img {
width: 100%;
height: auto;
}
.img_block.container .col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 15px !important;
}
.col-lg-4.col-md-4.col-sm-4.col-xs-12 {
padding-left: 15px;
}
.block54 {
margin: 0px 10px;
}

расположение немного не такое, потому что изначальное расположение блоков не такое, и блок 7 находится перед блоком 5 и 6.


И если Вас не затруднит, то прошу Вас ответить на  пару вопросов:

1) Откуда Вы узнали о нашей платформе?
2) Что Вам нравится в платформе?
3) Что бы хотели добавить в функционал платформы?
4) Пользовались ли Вы другими платформами?