2015-12-25 Дата: Пятница, 25.12.2015, 13:34 | Сообщение # 1
Лейтенант
Группа: Проверенные
Статус: Offline
Суть проблемы, создал сайт: http://wafa.com.ua Сайт некорректно отображается на мобильных телефонах. На мобильных телефонах сайт отображается таким образом: шапка сайта, потом слайдер, потом контент и под контентом правая колонка. Т.е сайт выглядит не как двух-колоночный, а как одно-колоночный. Масштабирование на телефоне не спасает. Почему-то масштабируется только контент и шапка, а вот правая колонка не масштабируется и располагается под контентом, а не справа от контента. Между <head> и </head> у меня стоит код: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Помогите решить проблему.
2015-12-25 Дата: Пятница, 25.12.2015, 15:23 | Сообщение # 2
Аццкий кодер
Группа: Администраторы
Статус: Unknown
RedStar , Почему-то масштабируется только контент и шапка, а вот правая колонка не масштабируется и располагается под контентом, а не справа от контента. Помогите решить проблему.
То бишь, вам нужно, что бы сайт в любом разрешении был двухколоночным? Редактируйте свои стили @media only screen and max-width - именно там прописано это поведение.
2015-12-25 Дата: Пятница, 25.12.2015, 15:43 | Сообщение # 3
Лейтенант
Группа: Проверенные
Статус: Offline
То бишь, вам нужно, что бы сайт в любом разрешении был двухколоночным?
Совершенно верно. Поконкретнее можно ответить, что конкретно надо исправить. Вот мой код в CSS:
Код
/***** Standard 1200px *****/ .wrapper {width:1180px;} /***** Standard 960px *****/ @media only screen and (max-width:1200px) { .wrapper {width:auto;} } @media only screen and (max-width: 960px) { .navbar-share {display: none;} .head-l,.head-r,.foot-l,.foot-r {float:none; width:auto; text-align:center; padding:10px 20px;} .head-r {padding:10px 20px 40px;} .site-n,.site-n a {font-size:32px;} .cap-ttl {padding:15px 20px 10px; font-size:18px;} .cap-ds {padding:0 20px 15px; font-size:14px;} #footer {padding:20px 0;} .foot-l {padding-bottom:0;} .foot-r {padding:0;} #content,#sidebar {float:none; width:auto;} #catmenu {text-align:left;line-height:normal;} #catmenu ul {display:none;background:#3498db;padding:20px;margin:1px 0 0;} #catmenu li {float:none;padding:9px 0;border-bottom:1px solid #eceff3;} #catmenu li:first-child a {padding-top:0;} #catmenu li a {height:auto;line-height:normal;padding:0;} #catmenu li a:hover,#catmenu li a.uMenuItemA,#catmenu li.uWithSubmenu:hover > a {background:none; font-weight:bold;} #catmenu ul ul {display:none;} #catmenu li.uWithSubmenu:hover > ul {display:none;} #catmenu li.uWithSubmenu.over > ul {display:block;} #catmenu ul ul,#catmenu ul ul ul {position:static;width:auto;border:none;border-top:1px solid #eceff3;margin:7px 0 0;padding:0 0 0 40px;background:#3498db;} #catmenu ul ul li {padding:9px 0;border:none;border-top:1px solid #eceff3;} #catmenu ul ul li:first-child {border:none;} #catmenu ul ul li:last-child {padding-bottom:0;} #catmenu ul ul li a,#catmenu ul ul li a:hover,#catmenu li li a.uMenuItemA,#catmenu li li.uWithSubmenu:hover > a {display:inline-block;padding:0;} #catmenu li.uWithSubmenu.over > a {color:#fff;font-weight:bold;} .nav-head {display:block;} #catmenu .nav-head.over+div>ul {display:block;} #catmenu li.uWithSubmenu em {display:inline-block;} .forum-box .gTableSubTop,.forum-box .forumIcoTd,.forum-box .forumThreadTd,.forum-box .forumPostTd,.forum-box .forumLastPostTd,.forum-box .threadIcoTd,.forum-box .threadPostTd,.forum-box .threadViewTd,.forum-box .threadAuthTd,.forum-box .threadLastPostTd,.forum-box .legendTable,.forum-box .fFastSearchTd,.forum-box .fFastNavTd,.forum-box .funcBlock,.forum-box .userRights,.forum-box .forumNamesBar{display:none;} .forum-box .gTableTop {padding:10px 20px;} .forum-box .postTable,.forum-box .postTable tbody,.forum-box .postTable tr,.forum-box .postTable td {display:block;width:auto!important;} .forum-box td.postBottom,.forum-box td.postTdInfo {display:none;} .forum-box .postTdTop {text-align:left;height:auto;line-height:normal;font-size:13px;padding:10px 20px;border-bottom-width:1px;} .forum-box .postTdTop + .postTdTop {padding:10px 20px;border-bottom-width:2px;font-size:11px;font-weight:normal;} .forum-box .postTdTop + .postTdTop:before {content:'';width:0;height:0;background:none;border-top:7px solid #dbe1e8;border-left:7px solid transparent;border-right:7px solid transparent;position:absolute;bottom:-9px;left:20px;} #toolbarMainContainer {display: none;} } @media only screen and (max-width: 640px){ .site-n,.site-n a {font-size:28px;} .cap-ttl {font-size:15px;} .cap-ds {font-size:12px;} .eMessage img,.eText img {width:100%!important;float:none;margin:0 0 20px!important;} .uTable tr td:first-child + td ~ td,#thread_search_form,#forum_filter,#thread_search_form {display:none;} .uTable .user_avatar img {width:50px;} #uEntriesList .uEntryWrap {width:50%!important;} span[id^=iCode] {display: block;padding-left: 38px;} .forum-search {display: block;} .shop-tabs {border-bottom: 0!important;} .shop-tabs li {border-bottom: 1px solid #A7A6A6 !important;} .shop-info {clear: both;} #puzadpn {display:none;} .catalog td.catalog-item {display: block !important;width: 100% !important;overflow: hidden!important;} td.shop-itempage-images {width: inherit !important;display: block;text-align: center;} td.shop-itempage-images #ipreview {display: block;margin: 0 auto 10px;} .shop-itempage-images + td {display: block;} } @media only screen and (max-width: 480px) { .site-n,.site-n a {font-size:24px;} .cap-ttl {padding:10px 20px; font-size:14px;} .cap-ds {display:none;} .manTable td,.commTd1,.commTd2 {display:block;width:100%;} .manTable td input,.manTable td textarea {max-width:97%;} .manTable .manTd1 {width:auto;} #uNetRegF tr td:first-child {max-width:20%!important;white-space:normal!important;font-size:11px;} #uNetRegF #fAvatar,#uNetRegF #fAvatarU {display:block;margin:0 0 3px;} #uNetRegF #fAvatarU + input {position:relative; margin:0 0 0 -10px;} .uNetDescr {font-size:9px;} #fTerms {float:left;margin:2px 10px 10px 0;} #fTerms+label {font-size:11px!important;vertical-align:top} #fTerms~div {font-size:9px;padding:10px 0 0;} .copy {font-size:9px;} .calendarsTable,.calendarsTable > tbody,.calendarsTable > tbody > tr,.calendarsTable > tbody > tr > td {display:block;width:100%;} #content .calTable {width:100%;margin:0 0 20px;} #content .calMonth {text-align:left;text-transform:uppercase;} .posttdMessage {padding:10px 10px 30px;} .fNavLink {font-size:11px;position:relative;margin:0 -3px;} .codeButtons,.smilesPart {display:none;} #message {max-width:97%;} .postUser {font-size:14px;} #frM53 .gTableLeft,#frM53 .gTableRight {display:block;width:auto!important} .opt_vals td {display:table-cell!important;} .opt_items {max-width:97%;} #puzadpn {display:none;} #uEntriesList .uEntryWrap {width:100%!important;} .manTable td #idAreaoEditbrief td,.manTable td #idAreaoEditmessage td,.manTable td #idAreaoEditdscr td {display:table-cell;} } @media only screen and (max-width: 360px) { #slider {display:none;} .site-n,.site-n a {font-size:22px;} .eTitle {font-size:20px;} .nav-head {font-size:19px;padding:13px 15px;} .nav-head .icon {position:absolute;width:40px;right:20px;top:12px;} } @media only screen and (min-width: 961px){ #toolbarMainContainer {display: block;} #catmenu li.uWithSubmenu em {font-size: 11px; right: 5px; top: 50%; margin-top: -12px;} }
2015-12-25 Дата: Пятница, 25.12.2015, 17:48 | Сообщение # 4
Аццкий кодер
Группа: Администраторы
Статус: Unknown
Поконкретнее можно ответить, что конкретно надо исправить.
Что бы ответить конкретно, мне нужно знать что конкретно вам нужно: минимальное разрешение и прочие многочисленные тонкости - вы же понимаете, что нельзя масштабировать до бесконечности; сроки выполнения работы, и предполагаемый бюджет.
2015-12-25 Дата: Пятница, 25.12.2015, 17:58 | Сообщение # 5
Лейтенант
Группа: Проверенные
Статус: Offline
Нужно нормальное двух-колоночное отображение с возможностью масштабирования на экране смартфона. От 1200px до 480px. В коде приведенном мной это прописано. За основу брался Дизайн # 1321
Сообщение отредактировал RedStar - Пятница, 25.12.2015, 18:02
2015-12-25 Дата: Пятница, 25.12.2015, 18:09 | Сообщение # 6
Аццкий кодер
Группа: Администраторы
Статус: Unknown
RedStar , Нужно нормальное двух-колоночное отображение с возможностью масштабирования на экране смартфона.
Какова цена вопроса и сроки? Самое широкое у вас меню, и оно статичное (не масштабируемое) ≈ 300 px. Под контент остается 180-40 - поля и отступы.. Решений несколько: - убрать лишнее из списка (поля, отступы, элементы); - сместить ниже, после контента; - скрыть; --