Проблемы с мобильной версией.

LL
На сайте с 18.02.2015
Offline
30
5244

Добрый день, не подскажите как избавиться от горизонтальной прокрутки в мобильной версии сайта? Сайт http://sitelena.ru/

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

Прописал:

<meta name="viewport" content="width=device-width, initial-scale=1">

Все хорошо по Mobile Friendly Websites от гугла, но видно, что в экране не вся страница отображается, а только часть, на что указывает проверка через http://pr-cy.ru/speed_test/

Ширина страницы превышает ширину области просмотра, из-за чего пользователям придется прокручивать ее по горизонтали. Адаптируйте контент для области просмотра, чтобы сделать свой сайт удобнее. (https://developers.google.com/speed/...tentToViewport)
Объяснение:
Ширина страницы составляет 750 CSS-пикс., а области просмотра – всего 411 CSS-пикс. Эти элементы находятся вне области просмотра:

Так же и Яндекс Вебмастер ругается:

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

Не подскажите как это можно оптимизировать?

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

+ еще и текст на мобилках почему то мелкий, как его можно увеличить? при просмотре на мобильных?

barabash
На сайте с 30.04.2011
Offline
71
#1

добавьте в css файл:

@media all and (max-width:450px){

#content {

width: 100%;

}

#sidebar-primary {

width: 99%;

margin-left: 0;

}

#wp_page_numbers {

width: 99%;

}

.post-box {

width: 100%;

height: 407px;

float: none;

margin-left: 0;

overflow: hidden;

}

.menu-secondary-container {

position: relative;

height: auto;

z-index: 300;

background: none;

padding-left: 0;

}

}

LL
На сайте с 18.02.2015
Offline
30
#2

barabash, спасибо, в метрике и pr-cy проблема ушла.

Правда у меня на мобиле как было все, так и осталось, может что то не то с мобилой, так как Toggle device toolbar Хромовский - показывает все отлично.

Только вот рекламные блоки AdSense остаются большими, и не входят в рамки, с ними можно что то сделать?

К примеру если прописываю initial-scale=0.47 вместо, initial-scale=1, то блоки стоят нормально и все классно, вот только метрика, pr-cy и даже гугл начинает ругаться на мобильную версию.

P.S. А как Вы нашли сразу все нужные элементы сайта для изменения? через firebug ? или есть софт получше, а то хочу еще один сайт настроить так.

barabash
На сайте с 30.04.2011
Offline
71
#3
LuckyLuciano:
barabash, спасибо, в метрике и pr-cy проблема ушла.

Правда у меня на мобиле как было все, так и осталось, может что то не то с мобилой, так как Toggle device toolbar Хромовский - показывает все отлично.

Только вот рекламные блоки AdSense остаются большими, и не входят в рамки, с ними можно что то сделать?

К примеру если прописываю initial-scale=0.47 вместо, initial-scale=1, то блоки стоят нормально и все классно, вот только метрика, pr-cy и даже гугл начинает ругаться на мобильную версию.

P.S. А как Вы нашли сразу все нужные элементы сайта для изменения? через firebug ? или есть софт получше, а то хочу еще один сайт настроить так.

Я использую консоль в гугл хроме.

С блоками рекламы лучше ничего не делать, могут наказать.

LL
На сайте с 18.02.2015
Offline
30
#4

Ясно, спасибо за помощь.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий