[Помогите] Доработка адаптивного шаблона

Код:

@media screen and (max-width: 980px) {

 
   #container {
      width: 95%;
   }
   #content {
      width: 60%;
  
   }
   #column-right {
      width: 35%;
   }

}

@media screen and (max-width: 650px) {
 
   #content {
       width: auto;width: 100%;
      float: none;
      margin: 20px 0;
   }
   #column-right {
      width: 100%;
      float: none;
      margin: 0;
   }
}

ставлю ниже 650

что видает на комп'ютере




на телефоне



Почему так?

 

Я Вас наверное удивлю, но все же
вопервых тему нужно назвать не оптимзиацией а адаптация верстки под опенкарт.

Во вторых разрешение телефона указана на коробке телефона, если Ваш телефон в браузере поддерживает разрешение 1024 то в этом случаии ему нужно предоставить немного другую таблицу стилей.

 

например? я просто впервые такое стараюсь сделать...

как прописывать?

 

Предполагается, что автору хочется для разных разрешений раскладывать колонки "по три" (десктоп)/ "по две" (планшет) и "по одной" (мобила) в строке.
Что сделать для этого: прочесть документацию responsive верстке и создав два доп. файлика respond.min.js и responsive.css, решить вопрос вложенности колонок для разных разрешений экрана.
Наглядным примером может служить создание "Начальные шаблоны" в Дримвивере.