адаптировать к мобильным устройствам

[Hugo]

Товарищи программисты, подскажите какие данные прописать в 

 

@media only screen and 

.container

.category_container, .box 

 

чтобы сайт нормально отображался на любых мобильных устройствах

 

@media only screen and (min-width: 990px) {
#header .links {
display: block !important;
}
}
@media only screen and (max-width: 1170px) {

.nivoSlider, .slideshow { min-height:60px;}
#all_header, .main, .ma-nav-mobile-container.containermenu,
.fixwidth{ width:100%;}
.ma-nav-mobile-container.default {width: 100%;}

#footer, #powered, #all_header, .container > #center_custom_box, #center_custom_box, #container > .verticaltab .box-product-category{ min-width:100%;}
#footer, #powered{ padding-left:0; padding-right:0; width:auto;}

.itemcolumns img, .block2 .image img { max-width:100%; height:auto !important;}
.product-grid .image img { max-width:100%; height:auto !important;}

.box-content > .box-product > div{width: 23.9%;}
#column-left + #column-right + #content .box .box-content > .box-product > div {width: 47.9%;}
#column-left + #content .box .box-content > .box-product > div,
#column-right + #content .box .box-content > .box-product > div { width: 31.9%;}

#column-left + #column-right + #content .verticaltab .about_category{ margin-right:0px; margin-bottom:20px;}

#column-left + #column-right + #content .product-grid > div {width: 47.9%;}

table.form textarea{ width:90%;}
select{ width:150px;}
input.large-field, select.large-field{ width:180px;}
.return-quantity input{ width:120px;}

.content-news img{ max-width:100%; height:auto !important;}

.matban_box.maska_text .one img{ width:100%; height:auto !important;}
#footer .customblock_footer > div img, .header_contact img,
.product_custom img, .tab-content img{ max-width:100%; height:auto !important;}

.matban_box.stylebanner:last-child{ margin-right:0px;}

}
@media only screen and (min-width: 990px) and (max-width: 1169px) {
.container{ width:960px;}
.menu > ul > li > a{padding-left:8px; padding-right:8px;}
#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div {width: 31.9%;}
#content .product-grid > div {width: 23.9%;}

.category_container, .box { max-width:960px;}


#header .header_contact{ width:35%;}

#column-left + #column-right + #content .product-list .centr { margin-right: 0px;}
#column-left + #column-right + #content .product-list .right { margin-left: 250px; position:relative; right:auto; top:auto;}

#footer .column { width:226px; }
#footer .column.three { width:144px; }
#footer .column.width50{ width: 472px;}

.content_carou .itemcolumns{ width:240px;}

}
@media only screen and (max-width: 989px) {
#header #logo { float:none; display:inline-block;}
.navbar #search{ position:absolute; right:0;}
#header .header_contact{ width:100%; display:block;}
#column-right{ display:none;}
#column-right + #content { margin-right:0px; }
.product-filter .sort { clear:both;}
#footer span.ctr{ clear:both; display:block;}
.movepanel{ display:none;}


.product-info > .left + .right {margin-left: 0px; }
.product-info > .left{ float:none; margin-bottom:20px;}
.product-info > .left .image{ float:none; margin-right:0;}

.product-info .image-additional{ float:none; width:100%;}
.product-list .centr { margin-right: 0px;margin-left: 220px;}
.product-list .right { margin-left: 220px; position:relative; right:auto; top:auto; text-align:left;}
.product-list .left{ max-width:200px;}
.product-list .left .image img{ width:100%; height:auto !important;}

.box-content > .box-product > div{width: 31.9%;}
#column-left + #content .box .box-content > .box-product > div, #column-right + #content .box .box-content > .box-product > div {width: 47.9%;}

/*News*/
.box-news.countnews-3,
.box-news.countnews-4,
.box-news.countnews-5{ width:100%; margin-right:0; padding-bottom:20px; border-bottom:1px solid #ddd; }
.box-news .newsimage img{ max-width:100%; height:auto !important;}

/*Module banner*/
.matban_box.beforetext .one img{ max-width:100%; height:auto !important;}

.matban_box .box_maska .stylebanner + .stylebanner{ margin-left:0;}
.count-5, .count-9{ width:33.3%;}
.count-4, .count-6, .count-7, .count-8,.count-10{ width:50%;}
.count-2{ width:100%;}

.product-grid .hover_but > div,
.box-product .hover_but > div, .block2 .hover_but > div {
-webkit-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
}

.full_container{ overflow:hidden;}
.full_container .matban_box.maska_text{ margin:0;}
.prod_review_box .center_desc3{margin-right:0px;}
.prod_review_box .center_desc3 .center_desc3_right{ margin-right:0;}
.prod_review_box .featured_review{
position:relative;
top:auto;
right:auto;}
div.links{ display:none;clear: both;}
.btnNav {display: block;}
#header .links > div{
display: block;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
white-space: normal;
}
#header .links > div:first-child{ border-top:1px solid rgba(0,0,0,0.08);}
}
@media only screen and (min-width: 790px) and (max-width: 989px) {
.container{ width:766px;}
.category_container, .box { max-width:766px;}
#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div {width: 47.9%;}
#content .product-grid > div {width: 31.9%;}

.category-list ul { width:33%;}

#footer .column.three { width:235px;}
#footer .column.width50, #footer .column{ width: 756px;margin:0 0 20px 0; min-height:auto;}
.content_carou .itemcolumns{ width:263px;}
#column-left + .content_carou .itemcolumns, #column-right + .content_carou .itemcolumns{ width:255px;}

}
@media only screen and (max-width: 789px) {
#column-left, #column-right{ display:none;}

#column-left + #column-right + #content, #column-left + #content, #column-right + #content , #content { margin-left:0px; margin-right:0px; }
.return-model, .return-name, .return-reason, .return-opened{ float:none; width:90%;}
#content .content .right, #content .content .left{ float:none; width:90%;}

.htabs a {font-size:12px;}


.verticaltab .box-product-category .about_category > .image img{width:100%; height:auto !important;}
.verticaltab .box-product-category .about_category > .image{ float:none; }

#header #cart, #header .position_cart #cart{ position:relative; top:0px;}
#header #search{ position:relative; top:0; text-align:right; margin-bottom:10px;}
.pagination{ border:none; text-align:center;}
.pagination .links{border-top:1px solid #ddd; border-bottom:1px solid #ddd; float:none;}
.pagination .results{ float:none;}
#footer .extras{ margin-bottom:10px;}


.news_page .image{ float:none; margin-bottom:20px;}
.news_page .image img{ max-width:100%;}
.box-news.countnews-2{ width:100%; margin-right:0;}

.count-2,.count-3{ width:100%;}
.count-5,.count-7,.count-9,
.count-4,.count-6,.count-8,.count-10{ width:50%;}

.block2{ text-align:center;}
.prod_review_box .block2 .image{ float:none;}
.block2 .center_desc3{ text-align:center;}

.block2 .description{ display:none;}
.block2 .image{ float:none; margin-right:0;}
.product-grid > div:hover .savemoney,.box-product > div:hover .savemoney,
.box-product div.itemcolumns:hover .savemoney, .block2:hover .savemoney{ display:none;}
.matban_box.slider_banner.double .threeheading{ font-size:2em;}
.matban_box.slider_banner.double, .matban_box.slider_banner.double.doubleleft{ width:100%; margin-left:0; float:none;}

}

@media only screen and (min-width: 480px) and (max-width: 789px) {
.container{ width:448px;}
.category_container, .box { max-width:448px;}

#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div,
#content .product-grid > div {width: 47.9%;}

#header #search input{ width:417px;}
#header #cart .content{ width:432px;}

.category-list ul { width:49%;}

#footer .column, #footer .column.three { float: none; width: 100%; min-height: auto; margin:0 0 20px 0;}
#footer .column.width50{ width: 448px;}
#column-left + #content .box .box-content > .box-product > div,
#column-right + #content .box .box-content > .box-product > div,
.box .box-content > .box-product > div {width: 47.9%;}

.content_carou .itemcolumns{ width:224px;}

}
@media only screen and (max-width: 479px) {
.cart-inf0 .image, .cart-inf0 .model, .cart-inf0 .price{display:none;}
.container{ width:280px;}
.main, #footer, #powered, #all_header, .ma-nav-mobile-container.containermenu,.fixwidth, #center_custom_box{min-width:320px;}
.category_container, .box, .container > #center_custom_box, #container > .verticaltab .box-product-category{ max-width:280px;}
.content_carou .itemcolumns { width:280px; padding:0; margin:0;}
.jcarousel-skin-opencart a img { width:40px; }


#header #search input{ width:249px;}
#header #cart .content{ width:264px;}
/*.navbar #search{ margin:8px 0; float:none; position:relative; top:8px;}*/

.category-list ul { width:99%;}
.htabs{ height:68px;}
.product-info > .left > .image a img#main-image{ width:258px; height:auto !important;}
.zoomContainer{ display:none;}

.login-content .left, .login-content .right { float:none; width:98%;}
.sitemap-info .left, .sitemap-info .right{ float:none; width:98%;}

.product-compare{ display:none;}
#column-left + #column-right + #content .box .box-content > .box-product > div {width: 100%;}
#column-left + #column-right + #content .product-grid > div,
#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div,
#content .product-grid > div, .product-grid{width: 100%; margin-right:0;}
.product-list .owl-carousel{ float:none;}
.product-list > div { padding:10px 20px;}
.product-list .left{ float:none; margin-bottom:10px; width:230px;}
.product-list .right, .product-list .centr{ margin-left:0px;}

.product-info .option > label {width: auto; float:none;}
.product-info .option > .option_field{ margin-left:0px;}
.product-info .left .image a.colorbox img{ width:100%; height:auto !important;}

.checkout-content .left, .checkout-content .right{ float:none; width:99%;}


#footer .column { float: none; width: 100%; min-height: auto; margin:0 0 20px 0;}
#footer .column.width50{ width: 280px;}


#column-left + #content .box .box-content > .box-product > div,
#column-right + #content .box .box-content > .box-product > div,
.box .box-content > .box-product > div {width:280px;}

.count-3,.count-5,.count-7,.count-9,
.count-2,.count-4,.count-6,.count-8,.count-10{ width:100%;}
.list_carousel{ padding:0;}
div > .quickviewbutton, .itemcolumns:hover > div > .quickviewbutton, div:hover > .quickviewbutton {display:none;}

[Einshtein]

это так не делается, все порядком сложнее

[RodgerFox]

Вы хотите разобраться или хотите что бы было сделано? 

Если первое, начните с вопроса, использовать min-width или min-device-width?

[Hugo]

Да, первое, использовать min-width или min-device-width?

[Hugo]

Просто нужно прописать те данные, чтобы сайт правильно отображался на любом мобильном устройстве. А то на тел. так, а на планшете по другому, а если планшет перевернуть в горизонтальное положение, то совсем по другому отображается сайт

[joramajora]

Вам по идее нужно прописывать условия @media для нескольких разрешений,ну допустим для max-width 300px,max-width 500px,max-width 600px... Как то так

[Hugo]

Ну да, это я понял. А нет какого то универсального решения, чтобы он сам подстраивался под любое разрешение?

Просто в шаблоне есть кнопка "адаптация к мобильным устройствам". При выключенной кнопки, гугл не видит мобильной версии сайта или видит, но коряво. Мне то не принципиально, есть или нет мобильной версии, я хочу поисковикам угодить.

[RodgerFox]

я слышал про эту волшебную кнопку, но она будет стоить от 10 тысяч рублей, если вы готовы пишите в ЛС адрес сайта. 

[Hugo]

Так она у меня есть же.

[Hugo]

Вам по идее нужно прописывать условия @media для нескольких разрешений,ну допустим для max-width 300px,max-width 500px,max-width 600px... Как то так

Вообщем понятно, буду для каждого прописывать.

Спасибо

[Einshtein]

Вообщем понятно, буду для каждого прописывать.

Спасибо

кроме контейнера нужно адаптировать классы других элементов

не достаточно на разрешении 300 пикселей уменьшить контейнер, так как у вас все блоки будут друг на друга залазить

Не мучайтесь - купите готовый шаблон и поправьте под свой стиль магазина

[Hugo]

Einshtein, так это и есть готовый шаблон, я его и покупал чтоб не мучаться. Задав вопрос автору шаблона, в ответ получил следующее:

В этих двух строках вместо 448 вставлять свои значения, которые подойдут для моего удовлетворения.

@media only screen and (min-width: 480px) and (max-width: 789px) {

.container{ width:448px;}

.category_container, .box { max-width:448px;}

Я где то читал, что можно в процентах задавать размеры. Такой вариант не решит мою проблему?

[Einshtein]

Einshtein, так это и есть готовый шаблон, я его и покупал чтоб не мучаться. Задав вопрос автору шаблона, в ответ получил следующее:

В этих двух строках вместо 448 вставлять свои значения, которые подойдут для моего удовлетворения.

@media only screen and (min-width: 480px) and (max-width: 789px) {

.container{ width:448px;}

.category_container, .box { max-width:448px;}

Я где то читал, что можно в процентах задавать размеры. Такой вариант не решит мою проблему?

если шаблон адаптивный, то зачем что-то менять. Если не адаптивный - то это работа для профессионала и лучше купите адаптивный шаблон

[Hugo]

Понял. Спасибо