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

liliya1919

  • Осваиваюсь на форуме
  • 80
  • 0
Ребят помогите! Всю голову сломала!

На сайте модули выведены по 3 колонки в 3 строки с фиксацией в 34% 33% 33% div.

При таком варианте в мобильной версии все так же отображается....

а надо все смещение в 1 колонку но с сохранением оптимального размера для экрана мобилы

*

ProtectYourSite

  • Живу я здесь
  • 950
  • 49
  • Безопасность вебсайтов
*

liliya1919

  • Осваиваюсь на форуме
  • 80
  • 0
Re: Адаптация div под мобильную версию
« Ответ #2 : 25.04.2017, 14:44:34 »
@media используйте
он используется только в CSS , я же на HTML (в описании категории) прописываю дивы
*

dmitry_stas

  • Профи
  • 10039
  • 953
Re: Адаптация div под мобильную версию
« Ответ #3 : 25.04.2017, 14:59:24 »
ну так что вы предлагаете, какой выход? :) CSS придуман именно для того, чтобы можно было задавать стили. @media - чтобы можно было задавать стили для разных разрешений экрана. а вы хотите и стили задать, но и CSS при этом не использовать? :) прописывайте в HTML что хотите, просто пропишите это с классами разными. а эти классы уже опишите в любом подключаемом CSS, и все
Тут дарят бакс просто за регистрацию! Успей получить!
Все советы на форуме раздаю бесплатно, то есть даром. Индивидуально бесплатно консультирую только по вопросам стоимости индивидуальных консультаций
*

liliya1919

  • Осваиваюсь на форуме
  • 80
  • 0
Re: Адаптация div под мобильную версию
« Ответ #4 : 25.04.2017, 15:14:52 »
ну так что вы предлагаете, какой выход? :) CSS придуман именно для того, чтобы можно было задавать стили. @media - чтобы можно было задавать стили для разных разрешений экрана. а вы хотите и стили задать, но и CSS при этом не использовать? :) прописывайте в HTML что хотите, просто пропишите это с классами разными. а эти классы уже опишите в любом подключаемом CSS, и все

Все получилось))) Спасибо)) (просто лень было стиль прописывать, думала есть проще вариант)
Кому надо :

Код
<div class="mod_me">
<div class="mod_me1">{module 1}</div>
<div class="mod_me2">{module 2}</div>
<div class="mod_me3">{module 3}</div>
</div>
Код
div.mod_me {
    margin: 0 auto;
    width: auto;
    max-width: 100%; /* контейнер не превышает 90% ширины экрана */
    }
div.mod_me1,div.mod_me2,div.mod_me3 {
    float: left;
    max-width: 33%;
    height: auto;
    padding: 3%; /* небольшие оступы для изображений */
    }
@media screen and (max-width: 480px) { /* разрешение смартфона */
    div.mod_me {
        width: 320px;
        min-width: 320px;
    }
    div.mod_me1,div.mod_me2,div.mod_me3 {
        max-width: 98%;
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Отключить Мобильную версию (bootstrap)

Автор SuschnosT

Ответов: 9
Просмотров: 197
Последний ответ 10.09.2017, 21:29:20
от SuschnosT
Криво отображается блок категорий материалов, через полную версию сайта

Автор Ilger981

Ответов: 6
Просмотров: 213
Последний ответ 12.05.2017, 15:08:09
от KKAAZZOO
Как повысить версию PHP в Joomla?

Автор tmpnikl

Ответов: 11
Просмотров: 349
Последний ответ 10.05.2017, 11:30:37
от tmpnikl
Адаптация таблиц под узкий экран

Автор technoteplo

Ответов: 5
Просмотров: 210
Последний ответ 09.11.2016, 18:06:19
от technoteplo
Перенесено: как центрировать мобильную версию сайта?

Автор b2z

Ответов: 0
Просмотров: 203
Последний ответ 26.01.2016, 14:15:24
от b2z