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

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Привет. У меня такая проблемка -  сделал я одностраничник на Joomla 3.4 с помощью расширения SP Pagebuilder при этом использовал стандартный шаблон - protostar. Все норм, все работает, только при заходе на страничку с мобильного устройства картинка в шапке довольно сильно "выпирает" из границ шаблона(совсем не красиво выглядит). Если смотреть в альбомной ориентации, то все нормально. Как мне исправить этот дефект при том, что меньше по размеру саму картинку сделать не получается так как она тогда не вместится в сам шаблон и будет смотреться не красиво при просмотре в ПК. Может как-то можно сделать так, чтобы в мобильной версии она вовсе не показывалась или показывалась другая, поменьше размером??
*

JaneFaint

  • Захожу иногда
  • 121
  • 3 / 0
Я думаю, что следует залезть в CSS, и там копаться: уменьшать/убирать/заменять картинку.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
@media only screen and (max-device-width: тут ваш размерpx) {
тут условия для размера
}

тут вы подключаете условие в шаблоне:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: ваш размерpx)" href="ваш CSS шаблона и правильный путь к нему.css" />

Можно ещё добавить для определённых дивов запреты, можно делать для всех стандарно:

/ Для небольших устройств (смартфоны) /
img {
  max-width: 100%;
  display: inline-block;
}
/ Для средних устройств (планшеты) /
@media (min-width: 420px) {
  img {
    max-width: 48%;
  }
}
/ Для больших устройств (ноуты, пк) /
@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}

В любом случае для "мобилок" вам без @media не обойтись ну ни как!

вот запрет для дивов:

@media (max-width: ваш размерpx) {
  .имя класса дива {
    display: none;
  }
}

<div class="имя класса дива">тело дива</div>

///

Надеюсь всё дословно и доступно.Всё происходит в файле ваш шаблон/имя.css (если нету lessов)
если есть-тогда переопределить в индексе или в лайоте на нужный файл( от шаблона зависит) и обновления это не затрут.
« Последнее редактирование: 11.01.2016, 11:59:31 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

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

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
ну тут надо знать, что вы и где сделали, даже из того, что я написал выше.
по умолчанию вам надо работать с CSS файлом шаблона.
а что вы наделали-тут не телепаты.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Я в конец документа template.css вставил следующее
@media only screen and (max-device-width: 783px) {

img {
  max-width: 100%;
  display: inline-block;
}

@media (min-width: 420px) {
  img {
    max-width: 48%;
  }
}

@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}
}

В документ index.php на 88 строку это в пределах тега <head> вставил следующее       
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 783px)" href="/css/template.css"/>
 не судите строго и не смейтесь, если я поступил, как не опытный пользователь)
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
В документ index.php на 88 строку это в пределах тега <head> вставил следующее       
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 783px)" href="/css/template.css"/>

это вам не надо тогда, раз вы выбрали этот вариант.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
@media (max-width: ваш размерpx) {
  .имя класса дива {
    display: none;
  }
}
ну меняйте "точечно" для дивов:тут хоть понятно?

///

только заметил:
@media only screen and (max-device-width: 783px) {  удалите и последнюю скобку.
вы код на код лепите.


вот  как я написал, тупо скопируйте с пояснялками( они закомментированы):
Спойлер
[свернуть]
« Последнее редактирование: 11.01.2016, 13:55:18 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
не помогло( хотел бы уточнить, что я работал именно с файлом template.css шаблона установленного на сайте. картинка по прежнему жутко выпирает вправо. и это только в книжной раскладке. в альбомной все ок. а если смотреть с планшета - то все норм в любом положении. короче проблема только с книжной разверткой на смартфонах.
P. S. скобку я убрал
« Последнее редактирование: 11.01.2016, 14:04:14 от mor4eGG »
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
я изменил ответ, почитайте.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
тупо скопировал, вставил в конец template.css - ничего не поменялось. вставил вместе с этой строкой @media only screen and (max-device-width: 783p) - никакого эффекта. теперь у меня такая картина
@media only screen and (max-device-width: 783px) {

/ Для небольших устройств (смартфоны) /
img {
  max-width: 100%;
  display: inline-block;
}
/ Для средних устройств (планшеты) /
@media (min-width: 420px) {
  img {
    max-width: 48%;
  }
}
/ Для больших устройств (ноуты, пк) /
@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
@media only screen and (max-device-width: 783px) {
это не надо.
и вы уверены, что именно этот CSS отвечает?
даже если и ставите, у вас скобка не закрыта.
поставьте просто в CSS, не важно куда, сверху или снизу, только в тот, что отвечает.может у вас лессы шаблон делает.
@media only screen and (max-device-width: 783px) { скобка началась, а где итого?
и эта строка не нужна, если вы ставите отдельно принудиловку.
« Последнее редактирование: 11.01.2016, 14:22:03 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
site.ru/templates/protostar/css
вот адрес документа templates.css в котором я меняю
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
у меня протостар с офф сайта, как и всё, установлено и нет проблем.
на мобилке(хром, ленова, андроид) всё корректно.
может вы не там скачали?
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
что вы имеете ввиду? sp page откуда я скачал? или Joomla? хотя какая разница - я все равно не вспомню. проверяю на тысяче устройств и на разных браузерах, сафари, Chrome опера; iphone, samsung, sony. работает корректно только на планшетах. может сама проблема в настройках sp page и этой картинке...хотя там я все варианты перепробовал
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
ну укажите картинку в новом диве, даже без класса, просто стилем в коде и проверьте
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
подскажите как это сделать
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
подскажите как это сделать
что именно?див?
<div style="ваш стиль, аля css">тут ваша картинка</div>
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

mor4eGG

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
спасибо за помощь и терпение. разобрался. проблема была в самих настройках sp page. я пошаманил в настройках и подогнал немного размеры самой картинки и она стала как миленькая куда и как нужно. а, может быть и эти изменения в CSS помогли напару с настройками sp page. хз, главное, что цель достигнута.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
 *DRINK*
ну хоть у кого-то настроение лучше!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Изменить область кликабельности ссылов в шаблоне (в шапке)

Автор Maffo

Ответов: 4
Просмотров: 650
Последний ответ 24.08.2021, 17:22:57
от Maffo
Не удается изменить страницу через конструктор yootheme

Автор bigbelka

Ответов: 0
Просмотров: 466
Последний ответ 05.08.2021, 12:06:21
от bigbelka
Protostar. Резиновый. Изменить размер в %

Автор Belka

Ответов: 29
Просмотров: 3727
Последний ответ 10.04.2021, 09:27:47
от sivers
Как изменить расположение Меню в Helix3?

Автор Bazaroff

Ответов: 18
Просмотров: 844
Последний ответ 24.01.2021, 19:06:59
от beliyadm
Непонятное отображение одной страницы сайта

Автор itbc

Ответов: 12
Просмотров: 711
Последний ответ 14.12.2020, 13:42:32
от itbc