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

[марик]

Здравствуйте.
Такая вот проблема. Сайт делала дома с монитором на 20*, пришла на работу, а там монитор на 15*. И вот на нем весь сайт сполз неизвестно куда. По идее сайт же должен просто уменьшаться, нет? Как  решить эту проблему? Срочно!

Рисунок №2 - то что я вижу на работе.
Рисунок №1 - то что я вижу дома

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

• 
• 

[AnnaM]

Добрый вечер! Вашей проблемой занимаемся.

[Сake]

На втором изображении, ваш сайт отображается по всей видимости из кэша. Сейчас верхнее меню навигации отображается как на первом прикрепленном вами изображении. Проблема возникает из-за внесенный изменений в файл стилей для шапки. Чтобы привести внешний вид к общему виду, как на втором изображении - найдите в файле стилей main.css следующий код

.header {
		position: absolute;
		position: fixed;
		top: 0;
		left: auto;
		z-index: 1024;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin-right: 10%;
		margin-left: 10%;
		width: 80%;
		/* height: 45px; */
		background-color: rgb(47, 96, 158);
		border: 0px solid #1B1B1D;
		  color: #333;
		 border-radius:5px;
}

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

.header {
  position: fixed;
  top: 0;
  left: auto;
  z-index: 1024;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  width: auto;
  background-color: rgb(47, 96, 158);
  color: #333;
  border-radius:5px;
  min-width: 100%;
}

[марик]

Сake (19 Август 2014 - 07:16) писал:

На втором изображении, ваш сайт отображается по всей видимости из кэша. Сейчас верхнее меню навигации отображается как на первом прикрепленном вами изображении. Проблема возникает из-за внесенный изменений в файл стилей для шапки. Чтобы привести внешний вид к общему виду, как на втором изображении - найдите в файле стилей main.css следующий код

.header {
	 position: absolute;
	 position: fixed;
	 top: 0;
	 left: auto;
	 z-index: 1024;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 box-sizing: border-box;
	 margin-right: 10%;
	 margin-left: 10%;
	 width: 80%;
	 /* height: 45px; */
	 background-color: rgb(47, 96, 158);
	 border: 0px solid #1B1B1D;
		 color: #333;
		 border-radius:5px;
}

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

.header {
position: fixed;
top: 0;
left: auto;
z-index: 1024;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
width: auto;
background-color: rgb(47, 96, 158);
color: #333;
border-radius:5px;
min-width: 100%;
}

все по-прежнему( Баннеры уехали под слайдер. рисунок №2.
На дом. компе все ОК. рисунок №1.
Понятно, что остаются старые данные, но почему "гуляют" баннеры?

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

• 
• 

[Сake]

У вас используется разное разрешение экрана. Вставленные вами баннеры не реализованы под адаптивный дизайн (При уменьшении или увеличении разрешения экрана - сайт подстраивается под соответствующий размер путем уменьшения, сдвига, скрытия блоков). Добавьте в конец вашего файла стилей main.css следующие классы

.banners {
  width: 29%;
}
.banners img {
  width: 100%;
}

[марик]

Сake (21 Август 2014 - 00:44) писал:

У вас используется разное разрешение экрана. Вставленные вами баннеры не реализованы под адаптивный дизайн (При уменьшении или увеличении разрешения экрана - сайт подстраивается под соответствующий размер путем уменьшения, сдвига, скрытия блоков). Добавьте в конец вашего файла стилей main.css следующие классы

.banners {
width: 29%;
}
.banners img {
width: 100%;
}

Спасибо. Приду на работу, проверю. А как "подогнать" верхнее меню под все разрешения мониторов?  И вообще сделать весь шаблон адаптивным?

[daria_dnk]

марик (21 Август 2014 - 09:19) писал:

Спасибо. Приду на работу, проверю. А как "подогнать" верхнее меню под все разрешения мониторов?  И вообще сделать весь шаблон адаптивным?

Здравствуйте! Попробуйте сделать следующее: в бэк-офисе в шаблоне main.css найдите строки
  (со строки № 3749)

  .logo {
		display:none
		float: left;
		clear: both;
		margin: 1em;
		width: 19%;
	}
	.logo .store_name {
		display: block;
		float: left;
		font-size: 120%;
	}

и замените их на

.logo {
		margin: 5px;
		width: 45%;
		line-height: 3.8;
	}
	.logo img {
		float: left;
		max-width: 40px;
	}
	.logo .store_name {
		padding: 0px 0px 0px 8px;
		width: auto;
		font-size: 16px;
		line-height: 2.5;
	}

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