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


Скрыть Слайдер На Мобильных Устройствах+Уменьшить Другие Картинки

слайдер

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

#1 7911Константин

7911Константин

    Новичок

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

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

Здравствуйте.
Подскажите пжл. как скрыть слайдер при просмотре сайта с мобильных?
Аккаунт 289414
В идеале, для мобильных, скрыть слайдер и написать текст со ссылками (информацию со слайдера как-то надо донести до пользователя)

И еще - что указать, чтобы большие картинки и видео с ютуба сами ужимались до любого маленького экрана пользователя?
пример на странице "советы"

#2 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 02 Ноябрь 2015 - 10:02

Просмотр сообщения7911Константин (31 Октябрь 2015 - 07:57) писал:

Здравствуйте.
Подскажите пжл. как скрыть слайдер при просмотре сайта с мобильных?
Аккаунт 289414
В идеале, для мобильных, скрыть слайдер и написать текст со ссылками (информацию со слайдера как-то надо донести до пользователя)

И еще - что указать, чтобы большие картинки и видео с ютуба сами ужимались до любого маленького экрана пользователя?
пример на странице "советы"
Здравствуйте.
Для того, чтобы скрыть слайдер на мобильных устройствах в конец style.css добавьте
@media only screen and (max-width: 767px){
div.flexslider {
	display: none;
}
}
Пришлите скриншот с примером отображения ссылок.
Что касается видео и изображений, то общий код добавить не получится, к каждому тегу нужно прописывать дополнительный код.
Пример:
В разделе сайт - страницы - перейдите в редактирование страницы "Мы рады видеть Вас!" - в поле описание нажмите источник.
код видео начинается с <iframe, его нужно замените на <iframe style="width:100%;max-width:500px;"
код изображений начинается с <img, его нужно заменить на  <img style="width:100%;max-width:500px;"
в обоих случаях изменяйте max-width - максимальная ширина элемента.

#3 7911Константин

7911Константин

    Новичок

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

Отправлено 04 Ноябрь 2015 - 06:42

Уважаемый
Danil

Большое спасибо, слайдер скрылся.

Вместо него мобильным пользователям хотелось бы показать картинку-ссылку (в приложении),
Или, просто текстовую ссылку, ведущую на страницу подробностями акций. Как это сделать?

Картинки и видео тоже ужались как нужно.

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

  • noslider.jpg


#4 Vaccina

Vaccina

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

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

Отправлено 04 Ноябрь 2015 - 06:49

В шаблоне main.css найдите:
@media only screen and (max-width: 767px){
div.flexslider {
		display: none;
}
}

замените на:
.mob_banner{display:none;}
@media only screen and (max-width: 767px){
div.flexslider {
		display: none;
}
.mob_banner{display:block;text-align:center;}
}

В шаблоне HTML найдите:
{% IF index_page %} 
	  <div class="flexslider" id="autumn-slider">
		<ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		</ul>
	 </div>
	{% ENDIF %}

замените на:
{% IF index_page %} 
	  <div class="flexslider" id="autumn-slider">
		<ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		</ul>
	 </div>
  <div class="mob_banner">
   <a href="ссылка"><img src="ссылка на баннер" alt="" /></a>
  </div>
	{% ENDIF %}

вместо текста вставьте необходимые ссылки





Темы с аналогичным тегами слайдер

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

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