Форум русской поддержки Joomla!® CMS
08.12.2016, 08:01:55 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 520 раз)
0 Пользователей и 1 Гость смотрят эту тему.
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« : 11.01.2016, 12:26:28 »

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

Репутация: +2/-0
Offline Offline

Сообщений: 106



« Ответ #1 : 11.01.2016, 12:37:33 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #2 : 11.01.2016, 12:44:23 »

@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, 12:59:31 от vipiusss » Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #3 : 11.01.2016, 13:46:40 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #4 : 11.01.2016, 13:57:46 »

ну тут надо знать, что вы и где сделали, даже из того, что я написал выше.
по умолчанию вам надо работать с CSS файлом шаблона.
а что вы наделали-тут не телепаты.
Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #5 : 11.01.2016, 14:33:27 »

Я в конец документа 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
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #6 : 11.01.2016, 14:44:52 »

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

это вам не надо тогда, раз вы выбрали этот вариант.
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #7 : 11.01.2016, 14:51:49 »

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

///

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


вот  как я написал, тупо скопируйте с пояснялками( они закомментированы):
Показать текстовый блок
« Последнее редактирование: 11.01.2016, 14:55:18 от vipiusss » Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #8 : 11.01.2016, 14:55:00 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #9 : 11.01.2016, 14:56:18 »

я изменил ответ, почитайте.
Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #10 : 11.01.2016, 15:12:37 »

тупо скопировал, вставил в конец 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
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #11 : 11.01.2016, 15:18:10 »

@media only screen and (max-device-width: 783px) {
это не надо.
и вы уверены, что именно этот CSS отвечает?
даже если и ставите, у вас скобка не закрыта.
поставьте просто в CSS, не важно куда, сверху или снизу, только в тот, что отвечает.может у вас лессы шаблон делает.
@media only screen and (max-device-width: 783px) { скобка началась, а где итого?
и эта строка не нужна, если вы ставите отдельно принудиловку.
« Последнее редактирование: 11.01.2016, 15:22:03 от vipiusss » Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #12 : 11.01.2016, 15:25:07 »

site.ru/templates/protostar/css
вот адрес документа templates.css в котором я меняю
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #13 : 11.01.2016, 15:29:48 »

у меня протостар с офф сайта, как и всё, установлено и нет проблем.
на мобилке(хром, ленова, андроид) всё корректно.
может вы не там скачали?
Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #14 : 11.01.2016, 15:35:47 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #15 : 11.01.2016, 15:39:27 »

ну укажите картинку в новом диве, даже без класса, просто стилем в коде и проверьте
Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #16 : 11.01.2016, 15:47:06 »

подскажите как это сделать
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #17 : 11.01.2016, 15:51:27 »

подскажите как это сделать
что именно?див?
<div style="ваш стиль, аля css">тут ваша картинка</div>
Записан
mor4eGG
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 32


« Ответ #18 : 11.01.2016, 16:18:46 »

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

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #19 : 11.01.2016, 19:37:14 »

 drink
ну хоть у кого-то настроение лучше!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet