0 Пользователей и 1 Гость просматривают эту тему.
  • 22 Ответов
  • 497 Просмотров
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Нужна помощь в настройке адаптации шаблона Joomla 3  Blue-Point к мобильным устройствам. В принципе все работает хорошо, меню превращается из горизонтального в вертикальное, контент в один столбец, Но кк всегда есть одно НО в моем случае их ДВА:

1 использую галереи  VSIG  настроил ширину картинки 400 px монитора маловато, а для мобильного устройства великовато. Как сделать так, что бы на разных устройствах галерея отображалась по разному?

2 Шапка сайта в шаблоне состоит из двух частей 1 - это логотип (logo.png)  яего растянул в styles.css все работает хорошо, НО только на мониторе компьютера. 2 - это картинка (header.jpg) она должна остаться когда перехожу в мобильную версию.

Сайт http://эвакуатор-кунгур.рф.

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

arma

  • Завсегдатай
  • 1510
  • 70 / 2
Ждите Деда Мороза тогда. Новичок - это не приговор. ;)
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
К таким ответам был готов! Меняю в  CSS параметр в одном случае работает хорошо на ПК, в другом на мобильном устройстве, как могу отредактировать "группу" SPAN4, что бы применить форматирование по разному.
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Хочу добиться того, что бы 1 картинка (являющаяся исправленным логотип) работала и масштабировалась на устройствах с разрешением до 768 px, а меньше она исчезала и оставалась только нижняя (2 и откорректировать ее ширину до 93  px.)  по отдельности все достижимо, а что бы работало вместе ...
*

lexxbry

  • Живу я здесь
  • 2389
  • 65 / 7
все делается при помощи @media
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

wishlight

  • Живу я здесь
  • 4427
  • 263 / 1
  • 300 руб очень быстрый хостинг в ЕС
Для галереи как-то так.

Код
@media (max-width: 568px) {
.vsig1_0 .vsig_top1_0 .vsig_top img {width: 100%;}
}
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Спасибо за ответ, буду пробовать сейчас.
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Для галереи как-то так.

Код
@media (max-width: 568px) {
.vsig1_0 .vsig_top1_0 .vsig_top img {width: 100%;}
}
Попробовал вставил предложенный "медиазапрос" эфекта не получил.
*

Taatshi

  • Глобальный модератор
  • 5071
  • 471 / 1
  • Верстаем и немножко кодим. Обращайтесь ;)
Медиазапросы нужно вставлять в самый конец файла - после них ничего уже не должно быть
*

wishlight

  • Живу я здесь
  • 4427
  • 263 / 1
  • 300 руб очень быстрый хостинг в ЕС
Ниже основного правила и можно:
Код
@media (max-width: 568px) {
.vsig1_0 .vsig_top1_0 .vsig_top img {width: 100% !important;}
}
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Что то недопонимаю, делаю как говорите, но эффекта нет. Медиазапрос оставил в самом конце документа, но при открытии на больном устройстве галерея не масштабируется.

По "шапке сайта" можете помочь? как сделать медиазапрос, что бы она (шапка) менялась пропорционально экрану в зависимости от разрешения или это не так просто?
*

lexxbry

  • Живу я здесь
  • 2389
  • 65 / 7
проще изучить что из себя представляет @media
тогда сможете подгонять блоки как вам надо
возможно у вас изначально все задано внутри блоков в пикселях
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

wishlight

  • Живу я здесь
  • 4427
  • 263 / 1
  • 300 руб очень быстрый хостинг в ЕС
inline... таки да. Придется мучатся.

inline - когда стиль прописан не в отдельном файле/блоке, а непосредственно в коде.

Искать в галерее.. Или добавить класс и убрать ширину с помощью дополнительного расширения.
« Последнее редактирование: 28.12.2018, 11:44:08 от wishlight »
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Мне нужно разобраться самому, что бы в дальнейшем делать такие вещи самостоятельно. а сейчас нужен грамтный совет и направить в нужное русло.
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Думаю, что поставил очень амбициозную задачу, необходимо сделать шапку сайта читаемой как на ПК так и на мобильном устройстве. возможно две разные картинки, одна отображается до 768 px?  другая когда экран меньше, вырвнивание например по верхнему правому краю.
*

wishlight

  • Живу я здесь
  • 4427
  • 263 / 1
  • 300 руб очень быстрый хостинг в ЕС
Правьте сам файл галереи или замените выводящийся HTML с помощью расширений Joomla.
*

lexxbry

  • Живу я здесь
  • 2389
  • 65 / 7
Думаю, что поставил очень амбициозную задачу, необходимо сделать шапку сайта читаемой как на ПК так и на мобильном устройстве. возможно две разные картинки, одна отображается до 768 px?  другая когда экран меньше, вырвнивание например по верхнему правому краю.
задача ничуть не амбициозная
просто разобраться с медиазапросами
ну и с CSS что как выводится
по сути у вас надо менять код
тут два варианта: или разбираться (путь вам указали в сторону @media )
или же заказать верстку
SEO-оптимизация,продвижение
Создание и сопровождение сайтов на Joomla
Миграция
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Еще раз:
1. выбрал шаблон который меня устраивает
2. заполнил нужной мне информацией
3. в принципе он адаптивный и меня все устроило, но когда сделал галерею  VSIG выплыл косячок (на экранах с большим разрешением не заметен)
4. меню адаптируется из горизонтального в вертикальное как я уже понял, то при помощи медиазапросов.
5. картинки в шапке две, одна из них вставлена  HTML вторая через  CSS (если можно так сказать)

Хочу разобраться и научиться! По этому и в первом сообщении акцентировал внимание, что "новичок".

Как исправить уже существующие в шаблоне ТРИ медиазапроса таким образом, что бы на широкомо экране была одна картинка, (та которая есть в данный момент), а на маленьком другая (которая планируется)?
*

wishlight

  • Живу я здесь
  • 4427
  • 263 / 1
  • 300 руб очень быстрый хостинг в ЕС
Шапка:
@media (max-width: 769px) {
#header-i {background: none; margin-bottom: -50px;}
#logo img { max-width:100%; max-height:auto;}
}

Социалки (сами подбирайте положение):
@media (max-width: 769px) {
#social {
top: 2%;
left: 90%;
position: fixed;
}
}

В галерее реплейсером убрать выводимую ширину и можно назначить общий класс где прописать 100% ширины для размера @media (max-width: 568px) {class: width:100%;} и стили должны заработать или руками в файлах галереи. Стили в самый низ.
« Последнее редактирование: 28.12.2018, 12:20:43 от wishlight »
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Ответ в таком виде и хотел видеть, спасибо, еще раз. Буду пробовать решить свою задачу.
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
вставил предложенный вами код для шапки, получилось, на ПК использую режим адаптивного дизайна для просмотра содержимого с разным разрешением получилось, а вот на телефоне рамочка (блок в котором отображается сама шапка) чуть меньше самой картинки причем с разным разрешением пропорции разные. По социалке сейчас буду пробовать еще что то, т.к. пока не вышло добиться желаемого результата.
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Вставил: код для социалки:
Код
#social {top: 2%;left: 85%;position: fixed;}

вставил код для шапки:
Код
#header-i {background: none; margin-bottom: -50px;} 
#logo img { max-width:100%; max-height:auto;}

у меня в  CSS было  @media screen and (max-width: 768px) ваш вариант был немного другой @media  (max-width: 769px), я вставил в свой вариант закоментировал те правила которые уже были в нем относительно социалки.

вышло следующее смещение шапки (но работет не плохо)

пример шапки и то что я написал.



и для полноты картины сам кусок кода:
Код
@media (max-width: 999px) {.blue-point{margin:0; padding:0; position:absolute; bottom:0; right:10px;}}
@media screen and (max-width: 768px) {
#social {top: 2%;left: 85%;position: fixed;}
/*#social { display:block; float:none}*/
#header-i {background: none; margin-bottom: -50px;}
#logo img { max-width:100%; max-height:auto;}
#logo { text-align:center; float:none; display:block}
/*#logo img { max-width:250px; max-height:70px; display:block; margin:0 auto}*/
#logo a{ text-align:center}
#site-description { text-align:center}
#top { float:none}
#menu-icon {width:100%;height: 55px; line-height:55px;text-decoration:none;color:#9ed9f4; padding:0; cursor: pointer;display: block; }
#menu-icon:hover,#menu-icon.active  {color:#fff}
.menu-icon-title { font-size:20px; padding:0 0 0 10px;}
.icon-double-angle-down { font-size:30px; padding:0 10px 0 0; float:right; height:55px!important; line-height:55px!important;}
#navbar{ display: none; height:auto; margin:0; padding:0; background:none; border:none; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; -o-box-shadow:none}
/* Menu */
#navbar-wrap { height:auto; display:block; margin:0 0 10px 0; padding:0 20px;  border: 1px solid #094680; background:#0975DA;}
*

kungurskiy

  • Осваиваюсь на форуме
  • 32
  • 1 / 0
Проблема не решена, еще раз:
при разрешении экрана для мобильного устройства некорректно отображается шапка она не масштабируется вместе с рамкой и "наезжает" на меню. что то я сделал не так ? Нужен совет как исправить.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Нужна помощь по AMP страницам

Автор Stasweb

Ответов: 0
Просмотров: 29
Последний ответ 20.05.2019, 09:45:16
от Stasweb
2 Ошибки при настройке способа оплаты на сервере

Автор fynjn77

Ответов: 0
Просмотров: 41
Последний ответ 17.05.2019, 11:23:41
от fynjn77
Плагин для шаблона

Автор antarey

Ответов: 7
Просмотров: 225
Последний ответ 23.03.2019, 20:13:04
от sivers
Правильный метод другого шаблона категории материалов

Автор Ragivort

Ответов: 10
Просмотров: 392
Последний ответ 21.01.2019, 01:21:44
от voland
chronoform 6 редактирование шаблона формы

Автор markizmds

Ответов: 4
Просмотров: 214
Последний ответ 16.01.2019, 12:38:39
от markizmds