Баннер
#1
Отправлено 26 Октябрь 2015 - 01:15
Заранее спасибо.
Аккаунт SL-328526
#2
Отправлено 26 Октябрь 2015 - 10:32
niko1a (26 Октябрь 2015 - 01:15) писал:
Заранее спасибо.
Аккаунт SL-328526
Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.banner a img {width: 100%;max-width:1168px;}
#3
Отправлено 26 Октябрь 2015 - 15:38
и в main.css уже есть свойство:
.banner{
width:100%;
text-align:center;
vertical-align: middle;
width: 100%;
}
Может в нем что-то подправить.
#4
Отправлено 26 Октябрь 2015 - 15:47
niko1a (26 Октябрь 2015 - 15:38) писал:
и в main.css уже есть свойство:
.banner{
width:100%;
text-align:center;
vertical-align: middle;
width: 100%;
}
Может в нем что-то подправить.
При применении инструкции из сообщения выше баннер будет уменьшаться прямо пропорционально разрешению экрана.
Уточните, пожалуйста, что у Вас не получилось, возможно имелось в виду что-то другое. Пример уменьшения баннера на скриншотах в приложении.
#5
Отправлено 26 Октябрь 2015 - 16:03
.banner a img {width: 100%;max-width:1168px;}
то баннер уменьшается, но проблема в том, что он выравнивается по левому краю, нужно чтобы был по центру, если добавить, например text-align:center;, то ничего не меняется.
#6
Отправлено 26 Октябрь 2015 - 16:13
niko1a (26 Октябрь 2015 - 16:03) писал:
.banner a img {width: 100%;max-width:1168px;}
то баннер уменьшается, но проблема в том, что он выравнивается по левому краю, нужно чтобы был по центру, если добавить, например text-align:center;, то ничего не меняется.
Насколько видно, Вы удалили предыдущий класс .banner, для которого изначально было прописано выравнивание содержимого по центру.
Сейчас Вам необходимо добавить в main.css код:
.banner{ width:100%; text-align:center; vertical-align: middle; }
#7
Отправлено 26 Октябрь 2015 - 16:14
.banner a img {width: 100%;max-width:1168px;}
.banner{
width:100%;
text-align:center;
vertical-align: middle;
width: 100%;
}
Теперь все работает, что-то сначала не так сделал, Firefly, большое спасибо.
#8
Отправлено 26 Октябрь 2015 - 16:42
если уменьшить размер обычного браузера (с компа), то он уменьшается, но если зайти с любого мобильного устройства, то он остается большого размера. Пробовал с Windows phone, iphone, ipad везде одинаково.
#9
Отправлено 26 Октябрь 2015 - 17:11
niko1a (26 Октябрь 2015 - 16:42) писал:
если уменьшить размер обычного браузера (с компа), то он уменьшается, но если зайти с любого мобильного устройства, то он остается большого размера. Пробовал с Windows phone, iphone, ipad везде одинаково.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 270px; overflow: hidden;z-index:1;}
Замените на:
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; height: 270px; overflow: hidden;z-index:1;}
#10
Отправлено 26 Октябрь 2015 - 17:20
В мобильном вроде стало нормально, в с ПК слайдер очень большой.
#12
Отправлено 26 Октябрь 2015 - 17:28
Тут наверно дело в размере самих изображений, у них ширина 1900 px, но раньше уменьшались до нужного размера.
#13
Отправлено 26 Октябрь 2015 - 17:32
niko1a (26 Октябрь 2015 - 17:28) писал:
Тут наверно дело в размере самих изображений, у них ширина 1900 px, но раньше уменьшались до нужного размера.
#15
Отправлено 27 Октябрь 2015 - 00:53
#slider { position: relative; margin: 0px auto; top: 0px; left: 0px; height: 164px; overflow: hidden; z-index: 1; } .slides_container { cursor: move; position: absolute; left: 0px; top: 0px; width: 1168px; height: 164px; overflow: hidden; } .slides_container img { left: 0px !important; }попробуйте заменить на:
#slider { position: relative; margin: 0px auto; top: 0px; left: 0px; height: 164px; overflow: hidden; z-index: 1; width: 100% !important; } .slides_container { cursor: move; position: absolute; left: 0px; top: 0px; width: 100% !important; height: 164px; overflow: hidden; } .slides_container img { left: 0px !important; width: 100% !important; }
#17
Отправлено 13 Ноябрь 2015 - 01:11
В main.css найдите:
.slides_container { cursor: move; position: absolute; left: 0px; top: 0px; width: 1168px; height: 164px; overflow: hidden; }
замените на:
.slides_container { cursor: move; position: absolute; left: 0px; top: 0px; width: 100%; height: 164px; overflow: hidden; }
далее найдите:
.slides_container img { left: 0 !important; }
замените на:
.slides_container img { left: 0 !important; width: 100% !important; } .slides_container div{width: 100% !important;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных