Адаптация div под мобильную версию

  • 4 Ответов
  • 126 Просмотров

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

Ребят помогите! Всю голову сломала!

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

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

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



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

*

Онлайн dmitry_stas

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

Re: Адаптация div под мобильную версию
« Ответ #4 : 25.04.2017, 17: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%; /* небольшие оступы для изображений */
    }