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

Здравствуйте! Помогите пожалуйста адаптировать небольшой 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>

 

http://bootstrap-3.ru/index.php

 

Спасибо, но что-то не разобрался как адаптировать((
Может есть еще варианты? Нужно сдвинуть все вправо и поставить по центру.

 

Есть такая штука в 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 пикселями работает