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

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

Как разместить в материале два модуля (блока) рядом друг с другом с учетом мобильной версии сайта?

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

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

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


« : 07.05.2017, 13:12:49 »

Здравствуйте!
Возникла трудность при отображении модулей в материале - при увеличении масштаба отображения сайта (т.е. в мобильной версии) блоки выводятся только в полэкрана.

При нормальном масштабе:

При увеличенном масштабе:


В материале введен код:
Код:
<div style="width: 46%; display: inline-block; margin: 15px;vertical-align:top;">{loadmodule mod_foxcontact,­Свяжитесь с нами}</div>
 <div style="width: 46%; display: inline-block; margin: 15px;vertical-align:top;">{zhyandexmap:1;}</div>


Это конечно не противоречит коду, но хотелось бы чтобы модули выводились в полный экран. Подскажите, пожалуйста, решение.

С уважением, и надеждой на отзыв.


Записан
fsv
Практически профи
*******

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

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


« Ответ #1 : 07.05.2017, 16:23:50 »

width: 46%; - и как с этим на весь экран вы хотите?
Удалите стили у дивов, добавьте класс. В стилях этому классу пропишите адаптивный вывод, используйте медиа-запросы.
Записан
Galiakberow
Осваиваюсь на форуме
***

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

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


« Ответ #2 : 07.05.2017, 18:10:45 »

width: 46%; - и как с этим на весь экран вы хотите?
Удалите стили у дивов, добавьте класс. В стилях этому классу пропишите адаптивный вывод, используйте медиа-запросы.
Про 46% - это я все прекрасно понимаю, но по другому не умею. По подробнее напишите, пожалуйста, про Адаптивный вывод и медиа-запросы? Или это слишком муторно - объяснять, показать пример?
Записан
fsv
Практически профи
*******

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

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


« Ответ #3 : 07.05.2017, 19:40:26 »

Или это слишком муторно - объяснять?
ага. Проще уж сделать, чем книжки тут пересказывать.
Если вы собираетесь заниматься сайтом(-ами), почитайте на эту тему, попробуйте, знания пригодятся. Вопрос то не горящий.

Для начала класс дивам добавьте, инлайн стили перенесите в css-файл. Будет то же, что есть. Дальше читаете про медиа-запросы, добавляете их ниже по коду в css-файле.
Если не получается, тут ссылку приводите на страницу, стили уже в CSS перенесены должны быть. Тогда с большой вероятностью вам подскажут.
Записан
Galiakberow
Осваиваюсь на форуме
***

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

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


« Ответ #4 : 07.05.2017, 22:55:03 »

Пробую делать как посоветовали - материал не цепляет CSS стили...

В материале прописал:
Код:
<div class="box">
<div class="block block_1">{loadmodule mod_foxcontact,­Свяжитесь с нами}</div>
<div class="block block_2">{zhyandexmap:1;}</div>
</div>

В файле стилей (добавил в первый попавшийся - загружаемый):
Код:
.box{
  width: 100%;
  margin: 50px auto;
}

.box:before {
  display: block;
  content: "full";
}

.block {
  width: 46%;
  display: inline-block;
}

.block_1 {
  float: left;
}

.block_2{
  float: right;
}

@media (max-width: 600px) {
  .box:before {
  content: "mobile";
  }

  .block_1 {
    width: 100%;
  }

  .block_2{
    width: 100%;
  }
}
Записан
KKAAZZOO
Практически профи
*******

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

Сообщений: 2252


« Ответ #5 : 07.05.2017, 23:18:09 »

У вас шаблон на фреймворке?
Записан
Galiakberow
Осваиваюсь на форуме
***

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

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


« Ответ #6 : 07.05.2017, 23:23:49 »

У вас шаблон на фреймворке?
Да, на нем
Записан
KKAAZZOO
Практически профи
*******

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

Сообщений: 2252


« Ответ #7 : 07.05.2017, 23:29:44 »

Должно сработать, например так, для Bootstrap2

Код:
<div class="row-fluid">
    <div class="span6">{loadmodule mod_foxcontact,­Свяжитесь с нами}</div>
    <div class="span6">{zhyandexmap:1;}</div>
</div>
Записан
Galiakberow
Осваиваюсь на форуме
***

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

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


« Ответ #8 : 07.05.2017, 23:36:14 »

Должно сработать, например так, для Bootstrap2

Не сработало((( У меня другой шаблон. Как и где искать эти классы - они же наверно и у меня есть, только названия отличаются?
« Последнее редактирование: 08.05.2017, 08:03:12 от Galiakberow » Записан
KKAAZZOO
Практически профи
*******

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

Сообщений: 2252


« Ответ #9 : 07.05.2017, 23:44:02 »

Это я вам для примера код привел. У каждого фреймворка своя разметка, хотя она однотипная и отличается только названиями классов  А фреймворков туева хуча. Смотрите какой у вас фреймворк в шаблоне и поменяйте названия классов.
Записан
Galiakberow
Осваиваюсь на форуме
***

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

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


« Ответ #10 : 07.05.2017, 23:47:32 »

Это я вам для примера код привел. У каждого фреймворка своя разметка, хотя она однотипная и отличается только названиями классов  А фреймворков туева хуча. Смотрите какой у вас фреймворк в шаблоне и поменяйте названия классов.
Примерно где и по какому принципу искать классы?
Записан
KKAAZZOO
Практически профи
*******

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

Сообщений: 2252


« Ответ #11 : 07.05.2017, 23:51:02 »

На сайте фреймворка используемого в шаблоне. Ищите раздел "Сетка" или что-то в этом роде.
« Последнее редактирование: 07.05.2017, 23:56:48 от KKAAZZOO » Записан
Galiakberow
Осваиваюсь на форуме
***

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

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


« Ответ #12 : 08.05.2017, 00:09:48 »

На сайте фреймворка используемого в шаблоне. Ищите раздел "Сетка" или что-то в этом роде.
Чем дальше в лес - тем больше дров))) А нельзя, как то, все таки, свои стили подключить?
Записан
dmitry_stas
Профи
********

Репутация: +935/-6
Online Online

Сообщений: 9958



« Ответ #13 : 08.05.2017, 00:20:53 »

можно. но не нужно. иначе зачем тогда подключать фреймворк, и при этом не использовать его возможности. попробуйте для bootstrap3

Код:
<div class="row">
    <div class="col-sm-6">{loadmodule mod_foxcontact,­Свяжитесь с нами}</div>
    <div class="col-sm-6">{zhyandexmap:1;}</div>
</div>
Записан
Galiakberow
Осваиваюсь на форуме
***

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

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


« Ответ #14 : 08.05.2017, 08:01:47 »

можно. но не нужно. иначе зачем тогда подключать фреймворк, и при этом не использовать его возможности. попробуйте для bootstrap3

Код:
<div class="row">
    <div class="col-sm-6">{loadmodule mod_foxcontact,­Свяжитесь с нами}</div>
    <div class="col-sm-6">{zhyandexmap:1;}</div>
</div>

Большое спасибо! Помогло! Всех благ!
Записан
dmitry_stas
Профи
********

Репутация: +935/-6
Online Online

Сообщений: 9958



« Ответ #15 : 08.05.2017, 09:14:22 »

значит открывайте документацию на bootstrap3 и изучайте Azn
Записан
Страниц: [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