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

35

Respayn

29 августа 2015, 10:44

788

Здравствуйте, подскажите пожалуйста почему размеры страницы на этом сайте не сужаются до мобильных размеров хотя для макета страницы использовал везде width:100%?

261

temniy

29 августа 2015, 11:04

#1

#backgroundTop {

margin: 0 auto;

width: 1000px;

}

#menu-top {

background: green none repeat scroll 0 0;

height: 50px;

width: 1000px;

border-radius: 6px;

text-align: center;

box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

и т.д.

⭐ Лучший хостинг от 4 евро, VPS от 6 евро - разные локации - любые карты - скидки до 20% - https://fornex.com/c/ffi2e3/ru/services/ ⭐

Подскажите где ошибка в Спойлер на javascript Цвет меню WP

35

Respayn

29 августа 2015, 11:12

#2

temniy:
#backgroundTop {
margin: 0 auto;
width: 1000px;
}

#menu-top {
background: green none repeat scroll 0 0;
height: 50px;
width: 1000px;
border-radius: 6px;
text-align: center;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

и т.д.

Добавил, но не помогло =(

5

WoWeb

29 августа 2015, 11:25

#3

only screen and (max-device-width: 480px) - 997 строчка в style.css - уберите width: 480px !important; */

Создание SEO оптимизированных сайтов | Продвижение сайтов (http://woweb.com.ua/)

35

Respayn

29 августа 2015, 12:42

#4

WoWeb:
only screen and (max-device-width: 480px) - 997 строчка в style.css - уберите width: 480px !important; */

Убрал, но мобильная страница тогда растягивается до 980 пикселей

5

WoWeb

29 августа 2015, 12:44

#5

Добавьте мета тег в head <meta name="viewport" content="width=device-width">

1

261

temniy

29 августа 2015, 13:12

#6

Respayn:
Добавил, но не помогло =(

Добавил ЧТО?? Надо убрать!

У Вас есть блоки, которым задана фиксированная ширина 1000px.

35

Respayn

29 августа 2015, 13:48

#7

WoWeb:
Добавьте мета тег в head <meta name="viewport" content="width=device-width">

Спасибо! Сработало!

5

WoWeb

29 августа 2015, 13:49

#8

Respayn:
Спасибо! Сработало!

Это обязательный тег при создании моб. версии. В следующий раз его в первую очередь ставьте)

1

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ