Как изменить мобильную версию сайта?

  • 19 Ответов
  • 962 Просмотров

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

*

mor4eGG

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

*

JaneFaint

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

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
@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, 13:59:31 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

mor4eGG

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

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
ну тут надо знать, что вы и где сделали, даже из того, что я написал выше.
по умолчанию вам надо работать с CSS файлом шаблона.
а что вы наделали-тут не телепаты.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями

*

mor4eGG

  • Осваиваюсь на форуме
  • ***
  • 38
  • 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

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
В документ 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

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
@media (max-width: ваш размерpx) {
  .имя класса дива {
    display: none;
  }
}
ну меняйте "точечно" для дивов:тут хоть понятно?

///

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


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

*

mor4eGG

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

*

vipiusss

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

*

mor4eGG

  • Осваиваюсь на форуме
  • ***
  • 38
  • 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

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

*

mor4eGG

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

*

vipiusss

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

*

mor4eGG

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

*

vipiusss

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

*

mor4eGG

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

*

vipiusss

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

*

mor4eGG

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

*

vipiusss

  • Профи
  • ********
  • 5508
  • 318
  • JoomlaNet
 *DRINK*
ну хоть у кого-то настроение лучше!
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями