Перейти к содержанию
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;}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Спасибо

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Спасибо

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

.container{ width:448px;}

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

.container{ width:448px;}

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.