Верстка сайта, едет блок на смартфонах, что делать?

Question

[petrenckira]

Что добавить в код css или куда-нибудь еще , чтобы блок не ехал на мобильной версии (iPhone5, Samsung какой-то). Ширина блока задается 60%, шрифт в пикселях. Тестила на адаптивность в разных сервисах, все "ок", кроме iPhone5. Какая может быть причина?

Comments

[sergey]

как заданы media queries? Приведите пример

[petrenckira]

SM: я не используюю медиа-запросы, я просто прописую в
body {

margin: 0;
padding: 0;
min-width: 1024px;
max-width: 1920px;
margin: 0 auto;
}
и както-так .....

[sergey]

petrenckira: для ios устройств это может не сработать

[sergey]

petrenckira: и я не вижу где у вас задан viewport для мобильных устройств в head

Answer 1

[sergey]

На будущее рекомендую писать через media queries для разных устройств и обязательно!!! в head указывать viewport

media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { ...}
и т.д.

Comments

[petrenckira]

Спасибо) я еще учусь, будем тестить)

[sergey]

petrenckira: удачи

Answer 2

[Саша Улыч]

url можно?

Comments

[petrenckira]

super-coach.ru/art

[Саша Улыч]

в head добавить , и в медиа для телефонов задать к примеру меньши шрифт для кнопки, или большую ширину блока

[Саша Улыч]

meta name="viewport" content="width=device-width" в head*

[petrenckira]

Спасибо) буду пробовать

Answer 3

[tef]

white-space: nowrap;
либо
display: inline-block;

и кнопка прыгнет вниз.