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


Отображение Сайта С Разными Разрешениями Экранов


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

#21 Ирина345

Ирина345

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

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

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

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

Здравствуйте.
Отменил.
Необходимо, чтобы баннер находился посередине и на мобильных устройствах, когда откроется сайт как на картинке #1
Выполните инструкцию из сообщения #15

#22 ligorempty

ligorempty

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

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

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

Выполнил. Даже 50% поставил. Теперь на мобильниках отображается вроде ровненько. Да вот только открывается все равно левый угол (часть) Нужно растягивать каждый раз

#23 Ирина345

Ирина345

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

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

Отправлено 08 Декабрь 2014 - 16:30

Просмотр сообщенияligorempty (08 Декабрь 2014 - 16:17) писал:

Выполнил. Даже 50% поставил. Теперь на мобильниках отображается вроде ровненько. Да вот только открывается все равно левый угол (часть) Нужно растягивать каждый раз

найдите в hTML
			 <!-- Главная страница -->
		{% IF index_page %}

<div id="module_area">
<div id="flexslideshow" class="flexslider">
						  <ul class="slides">
																<li>
																   <a href="http://peplanet.ru/catalog/Provari"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://s322050.storeland.net/Provari_buy.jpg?2412) center no-repeat;"></div>
																 <img src="http://design.peplanet.ru/P3-Provari-kupit.jpg" alt="Slide 1" class="slide_img"></a>
																</li>
																<li>
																  <a href="http://peplanet.ru/goods/Nabor-Eleaf-iJust-Mini"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://design.peplanet.ru/mini-ijust.600x200%20black1.png?7469) center no-repeat;"></div>
																  <img src="http://design.peplanet.ru/mini-ijust.600x200%20black1.png?7469" alt="Slide 2" class="slide_img"></a>
																</li>
																<li>
																<a href="http://peplanet.ru/catalog/eCom"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://design.peplanet.ru/ecom_buy1.jpg?7301) center no-repeat;"></div>
																  <img src="http://design.peplanet.ru/ecom_buy1.jpg?7301" alt="Slide 3" class="slide_img"></a>
																</li>
												  </ul>
</div>
</div>
{% ENDIF %}
и переместите его после строки

			  {% ENDIF %}			
			</h1>
		  </div>
		</div>
	  {% ENDIF %}
	  <div class="inner">


далее в main.css
найдите

#header  .flexslider {width:100%;margin:0 auto !important;}
#header  .flexslider li .bigPic {display:none !important;position:relative;top:0;margin: 0 auto;top: 0;left: 50%;margin-left: -960px;}
#header  .flexslider ul.slides li {text-align:center !important;position:relative;*margin-left: -20px;}
замените на

 .flexslider {width:100%;margin:0 auto !important;}
 .flexslider li .bigPic {display:none !important;position:relative;top:0;margin: 0 auto;top: 0;left: 50%;margin-left: -960px;}
 .flexslider ul.slides li {text-align:center !important;position:relative;*margin-left: -20px;}


далее найдите
#module_area {width:760px;margin-left: 50%;text-align:center;padding:5px 0;}
замените на
#module_area {width:760px;margin:0 auto;text-align:center;padding:5px 0;}


#24 ligorempty

ligorempty

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

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

Отправлено 08 Декабрь 2014 - 16:48

Дело сдвинулось.
Вот что вышло

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

  • IMG_0198.PNG
  • IMG_0197.PNG


#25 Ирина345

Ирина345

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

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

Отправлено 08 Декабрь 2014 - 16:56

Просмотр сообщенияligorempty (08 Декабрь 2014 - 16:48) писал:

Дело сдвинулось.
Вот что вышло
Вы не правильно переместили код слайдера нудно после строки
			{% ENDIF %}			
			</h1>
		  </div>
		</div>
	  {% ENDIF %}
	  <div class="inner">

а Вы переместили после

		  {% ENDIF %}			
			</h1>
		  </div>
		</div>
	  {% ENDIF %}
	  <div class="inner">
		<div id="column-left">

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

#26 ligorempty

ligorempty

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

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

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

Также как и было вначале. Хотя первые несколько загрузок он показал правильное отображение.
https://developers.g...speed/insights/ также показывает

#27 Ирина345

Ирина345

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

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

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

Просмотр сообщенияligorempty (08 Декабрь 2014 - 17:03) писал:

Также как и было вначале. Хотя первые несколько загрузок он показал правильное отображение.
https://developers.g...speed/insights/ также показывает
На данный момент отображается так

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

  • 23411.jpg


#28 ligorempty

ligorempty

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

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

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

По данным гугла и моего тел-на после очистки кеша, все сбрасывается и опять угол. Мне кажется что-то в этом углу определяет изначальный размер.
По идее большинство девайсов имеют ширину 320px, как iPhone и другие. Может привязать этот размер к чему-то, типа минимум и всё

#29 ligorempty

ligorempty

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

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

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

Нашел небольшую статью, вроде бы все просто, крутится в голове. Но как применить не пойму http://www.html5rock...sign/#toc-style

#30 Ирина345

Ирина345

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

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

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

Просмотр сообщенияligorempty (08 Декабрь 2014 - 18:18) писал:

Нашел небольшую статью, вроде бы все просто, крутится в голове. Но как применить не пойму http://www.html5rock...sign/#toc-style
Можно попробовать добавить конкретный отступ от края, например найдите
#module_area {width:760px;margin:0 auto;text-align:center;padding:5px 0;}
замените на

#module_area {width:760px;margin:0 auto;text-align:center;padding:5px 0;margin-left: 322px;}


#31 ligorempty

ligorempty

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

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

Отправлено 08 Декабрь 2014 - 19:50

Без изменений.
На скрине видно по линии бэкграунда футера, в какой части открывается сайт (точнее ширина)

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

  • IMG_0198.PNG


#32 Vaccina

Vaccina

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

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

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

На счет футера, попробуйте следующее, в main.css найдите:
#footer {
	background-color: #f0f0f0;
	border-top: 4px solid #333333;
	clear: both;
	margin-top: 30px;
	min-height: 100px;
	padding: 0 0 30px;
}
замените на:
#footer {
	background-color: #f0f0f0;
	border-top: 4px solid #333333;
	clear: both;
	margin-top: 30px;
	min-height: 100px;
	padding: 0 0 30px;
	width: 100%;
}

также советую процентный размер задать картинке на главной странице в описании, то есть находим:
<img style="width: 954px; height: 131px;" src="http://st.sait.ru/7/1307/313/bannerzakaz2.jpg" alt="">

и у стиля width меняем значение на 100%

#33 Василера

Василера

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

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

Отправлено 03 Апрель 2016 - 17:28

Добрый день!

Когда заходишь на мой сайт через тел, то съедается логотип. Подскажите, пожалуйста, как это можно исправить?

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

  • Screenshot_2016-04-03-12-47-251.png


#34 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 03 Апрель 2016 - 17:44

Просмотр сообщенияВасилера (03 Апрель 2016 - 17:28) писал:

Добрый день!

Когда заходишь на мой сайт через тел, то съедается логотип. Подскажите, пожалуйста, как это можно исправить?

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
body {
  background: url({ASSETS_IMAGES_PATH}21-fon-dlya-sayta.png);
  min-width: 960px;
}

Замените на:
body {
  background: url({ASSETS_IMAGES_PATH}21-fon-dlya-sayta.png);
  min-width: 1200px;
}


#35 Василера

Василера

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

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

Отправлено 05 Апрель 2016 - 17:17

Супер! Спасибо!




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

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