[Помогите] Настроить Css

Тема в разделе "OpenCart", создана пользователем Dimakusch, 22 авг 2016.

  1. Dimakusch

    Dimakusch

    Регистрация:
    4 дек 2015
    Сообщения:
    129
    Симпатии:
    2
    Здравствуйте! Помогите пожалуйста адаптировать небольшой css стиль под телефон.
    Вот как сейчас все выглядит:

    Вот код модуля:

    Код:
    <style>
    .gost {
         margin-left: 56%;
          text-align: right;
        color: #D9534F; /* Цвет текста */
         font-size: 1.4em;
       }
       .gost2 {
         font-size: 1.4em;
       }
    .ds {margin: 20px 0 20px 0;}
    .ds .product {border-bottom: 1px solid #F0F0F0; padding:5px; margin: 5px;}
    .ds .product img { padding: 6px;max-width: 100%;max-height: 150px;display: block; border:1px dashed #D9534F;}
    .ds .product span {color:#808080;margin-left: -80px;}
    .ds .product a {font-size: 1em;margin-left: -80px;}
    </style>
     
  2. YoYo

    YoYo

    Регистрация:
    20 июл 2016
    Сообщения:
    121
    Симпатии:
    28
  3. Dimakusch

    Dimakusch

    Регистрация:
    4 дек 2015
    Сообщения:
    129
    Симпатии:
    2
    Спасибо, но что-то не разобрался как адаптировать((
    Может есть еще варианты? Нужно сдвинуть все вправо и поставить по центру.
     
  4. ajs

    ajs

    Регистрация:
    21 мар 2014
    Сообщения:
    15
    Симпатии:
    10
    Есть такая штука в CSS - @media

    его например использует BOOTSTRAP

    @media (max-width: 767px) {
    .block-xs {
    width: 100%;
    }
    }
    вот так напиши. это значит, что если экран меньше 767px в ширину , то к блоку .block-xs применяется этот стиль,
    а если больше 767px, то стиль не применяется


    вот еще примеры....

    *********************************************************************
    @media (min-width: 768px) and (max-width: 991px) {
    .block-xs {
    width: 70%;
    }
    }

    это между 768 и 991 пикселями работает

    ********************************************************************

    @media (min-width: 992px) and (max-width: 1199px) {
    .block-xs {
    width: 30%;
    }
    }

    это между 992 и 1199 пикселями работает
     
    Dimakusch нравится это.