Код: @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, решить вопрос вложенности колонок для разных разрешений экрана. Наглядным примером может служить создание "Начальные шаблоны" в Дримвивере.