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


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


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

#1 Vovan

Vovan

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

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

Отправлено 22 Октябрь 2015 - 00:03

Здравствуйте! Аккаунт SL-361259

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

2) Нужно передвинуть корзину в место указанное на скриншоте

3) поменять цвет иконки поиска на черный (только в мобильной версии)

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

  • 34YjEOSR3NQ.jpg
  • ku57rTCCuYg.jpg


#2 Vovan

Vovan

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

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

Отправлено 22 Октябрь 2015 - 13:25

Есть кто, уважаемая поддержка, помогите решить проблему

#3 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 23 Октябрь 2015 - 01:57

1. После изменений из 2го и 3го пункта добавьте:
.slides_container {
width: 550px;
height: 262px;
}
.slides_container img {
width: 500px !important;
height: 262px !important;
}
2. В main.css после:
@media all and (max-width: 330px) {
вставьте:
#header .header-top-right .header-right-mobile {
float: right;
top: 315px;
right: 0px;
position: absolute;
}
3. После изменений из 2го пункта добавьте:
.header-top .header-top-right #search_mini_form2 .form-search .button {
background-color: #000;
}

Результат должен быть следующим:
FireShot Screen Capture #180 - 'Мы рады видеть Вас!' - a-nfy_ru.jpg

#4 Vovan

Vovan

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

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

Отправлено 23 Октябрь 2015 - 10:51

Просмотр сообщенияVaccina (23 Октябрь 2015 - 01:57) писал:

1. После изменений из 2го и 3го пункта добавьте:
.slides_container {
width: 550px;
height: 262px;
}
.slides_container img {
width: 500px !important;
height: 262px !important;
}
2. В main.css после:
@media all and (max-width: 330px) {
вставьте:
#header .header-top-right .header-right-mobile {
float: right;
top: 315px;
right: 0px;
position: absolute;
}
3. После изменений из 2го пункта добавьте:
.header-top .header-top-right #search_mini_form2 .form-search .button {
background-color: #000;
}

Результат должен быть следующим:
Прикрепленный файл FireShot Screen Capture #180 - 'Мы рады видеть Вас!' - a-nfy_ru.jpg

@media all and (max-width: 1200px) {
#slider, #slider > div {
width: 100% !important;
}
}

1)я убрал этот код и только после этого слайдер в мобильной версии встал нормально, но при этом изменился слайдер в полной версии сайта, он стал гораздо меньше!

2) корзина не изменила свое положение, также осталась в верху

#5 Vovan

Vovan

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

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

Отправлено 23 Октябрь 2015 - 11:04

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

#6 Юля123

Юля123

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

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

Отправлено 23 Октябрь 2015 - 17:07

Просмотр сообщенияVovan (23 Октябрь 2015 - 10:51) писал:

@media all and (max-width: 1200px) {
#slider, #slider > div {
width: 100% !important;
}
}

1)я убрал этот код и только после этого слайдер в мобильной версии встал нормально, но при этом изменился слайдер в полной версии сайта, он стал гораздо меньше!

2) корзина не изменила свое положение, также осталась в верху

Здравствуйте.

По первому пункту - мы разберемся и пришлем Вам инструкции позже.

По второму пункту. Если я Вас правильно поняла, то корзина должна изменять свое положение только в мобильной версии, так?  Тогда выполните пункт 2 из сообщения №3, а так же в main.css после кода

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

добавьте код:

#header .header-top-right .header-right-mobile {
float: right;
top: 297px;
right: 0px;
position: absolute;
}


#7 Юля123

Юля123

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

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

Отправлено 23 Октябрь 2015 - 17:20

Просмотр сообщенияVovan (23 Октябрь 2015 - 10:51) писал:

@media all and (max-width: 1200px) {
#slider, #slider > div {
width: 100% !important;
}
}

1)я убрал этот код и только после этого слайдер в мобильной версии встал нормально, но при этом изменился слайдер в полной версии сайта, он стал гораздо меньше!

2) корзина не изменила свое положение, также осталась в верху

По первому пункту. Добавьте в main.css код:

.slides_container {
width: 550px;
height: 262px;
}
.slides_container img {
width: 500px !important;
height: 262px !important;
}

после кода:
@media all and (max-width: 991px) {


И удалите код
@media all and (max-width: 1200px) {
#slider, #slider > div {
width: 100% !important;
}
}


#8 Vovan

Vovan

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

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

Отправлено 23 Октябрь 2015 - 20:39

Просмотр сообщенияЮля123 (23 Октябрь 2015 - 17:20) писал:

По первому пункту. Добавьте в main.css код:

.slides_container {
width: 550px;
height: 262px;
}
.slides_container img {
width: 500px !important;
height: 262px !important;
}

после кода:
@media all and (max-width: 991px) {


И удалите код
@media all and (max-width: 1200px) {
#slider, #slider > div {
width: 100% !important;
}
}

Все отлично, только вот хотелось бы чтоб сайт четко адаптировался по размерам (проблема 1), уменьшить расстояние между слайдером и блоком преимуществ (проблема 2)

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

  • S5Q4AlCjm8I.jpg


#9 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 24 Октябрь 2015 - 02:18

1.Попробуйте следующее, в main.css найдите:
.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
замените на:
.container {
	margin-right: auto;
	margin-left: auto;
}

2. В main.css после:
@media all and (max-width: 330px) {

вставьте:
#slider {
	height: 107px !important;
}


#10 Vovan

Vovan

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

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

Отправлено 24 Октябрь 2015 - 11:00

Просмотр сообщенияVaccina (24 Октябрь 2015 - 02:18) писал:

1.Попробуйте следующее, в main.css найдите:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
замените на:
.container {
margin-right: auto;
margin-left: auto;
}

2. В main.css после:
@media all and (max-width: 330px) {

вставьте:
#slider {
height: 107px !important;
}

попробовал и не помогло, расстояние осталось таким же, щель сбоку такая же, уменьшился только слайдер! на данный сделал бекап

#11 Vovan

Vovan

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

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

Отправлено 25 Октябрь 2015 - 23:55

проблема еще актуальна

#12 Vovan

Vovan

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

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

Отправлено 26 Октябрь 2015 - 11:12

ап

#13 Юля123

Юля123

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

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

Отправлено 26 Октябрь 2015 - 11:58

Просмотр сообщенияVovan (24 Октябрь 2015 - 11:00) писал:

попробовал и не помогло, расстояние осталось таким же, щель сбоку такая же, уменьшился только слайдер! на данный сделал бекап

Здравствуйте, попробуйте следующее:

1) зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css и найдите код

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

после него добавьте:

div#slider {
	height: 200px !important;
}

2) далее найдите код
@media all and (max-width: 480px) {

после него добавьте

div#slider {
	height: 150px !important;
}
3)  и наконец, найдите код
@media all and (max-width: 330px) {

и после него добавьте код
div#slider {
	height: 112px !important;
}


#14 Vovan

Vovan

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

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

Отправлено 26 Октябрь 2015 - 13:33

Просмотр сообщенияЮля123 (26 Октябрь 2015 - 11:58) писал:

Здравствуйте, попробуйте следующее:

1) зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css и найдите код

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

после него добавьте:

div#slider {
	height: 200px !important;
}

2) далее найдите код
@media all and (max-width: 480px) {

после него добавьте

div#slider {
	height: 150px !important;
}
3)  и наконец, найдите код
@media all and (max-width: 330px) {

и после него добавьте код
div#slider {
	height: 112px !important;
}

спасибо все классно

#15 aleff

aleff

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

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

Отправлено 29 Март 2016 - 15:35

Добрый день!
Возможно ли убрать изображение из шапки в мобильной версии и просто прописать название и телефон, или создать новую шапку меньшего размера только для мобильной версии.
а то яндекс ругается, сайт не адаптирован для моб
Аккаунт SL-311500

#16 Юля123

Юля123

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

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

Отправлено 29 Март 2016 - 16:12

Просмотр сообщенияaleff (29 Март 2016 - 15:35) писал:

Добрый день!
Возможно ли убрать изображение из шапки в мобильной версии и просто прописать название и телефон, или создать новую шапку меньшего размера только для мобильной версии.
а то яндекс ругается, сайт не адаптирован для моб
Аккаунт SL-311500


Здравствуйте, такой вид Вас устроит?

QIP Shot - Screen 243.png


если да, тогда в шаблоне HTML найдите код:

			  <!-- Логотип -->
					 <div class="logo col-lg-3 col-md-2 col-xs-12">
				<a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">			   
				  <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}Header.png" alt="" title="" width="1200" height="110">									   
				</a>
			  </div> 

после него добавьте код:

			 <div class="mobContact col-xs-12">
					{% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</p>{% ENDIF %}
					{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</p>{% ENDIF %}
				   {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p>Телефон : {SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</p>{% ENDIF %}
			  </div> 


в main.css после кода:

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

добавьте код:

.logo {
display: none;
}
.button-navbar.btn-navbar {
display: block;
right: 0;
top: 0;
}

.mobContact {
margin: 0 auto;
text-align: center;
margin-top: 20px;
}
.mobContact {
	text-align: center;
	padding: 10px 0;
}
#header .header-top-right .header-right-mobile {left:0;top:140px;}


после кода:

@media all and (min-width:480px){

добавьте код:

.mobContact{display:none;}


#17 aleff

aleff

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

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

Отправлено 29 Март 2016 - 16:36

Да устраивает, а возможно ли создать еще  маленький логотип и поместить сверху или написать название сайта, красивым шрифтом?

#18 Юля123

Юля123

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

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

Отправлено 29 Март 2016 - 16:48

Просмотр сообщенияaleff (29 Март 2016 - 16:36) писал:

Да устраивает, а возможно ли создать еще  маленький логотип и поместить сверху или написать название сайта, красивым шрифтом?

Добавьте картинку в редакторе шаблонов в левом боковом меню, и укажите на скриншоте куда его добавить, мы поможем с установкой.

#19 aleff

aleff

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

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

Отправлено 29 Март 2016 - 18:41

Добавил файл logo1, хотелось бы расположить над телефонами

#20 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 30 Март 2016 - 04:41

В шаблоне HTML найдите:
<div class="row">
			  <!-- Основное меню -->
			  <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">

после него разместите:
<a class="mob_logo" style="display:none;" title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">			   
				  <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}logo1.png" />									   
				</a>

В main.css найдите:
@media all and (max-width: 480px) {

после него пропишите:
.mob_logo{
display:block !important;
float:right;
}
.mob_logo img{
width:70%;
height:auto;
}





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

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