Так что это мой сайт:Мой заголовок слишком большой на Iphone и ломает макет, не может настроить его на маленьком экране
На каждом экране, но Iphone, все, кажется, работает хорошо , Заголовок (TOURBILLON в желтом заголовке) имеет letter-spacing, который по настольному компьютеру довольно сложно оценить по какой-то причине, но на iphone это довольно много.
В любом случае, что происходит на е-А Iphone, слово слишком большой, и делает все, перерыв:
Я пробовал много вещей. Установка max-width в div и размещение текста заголовка (<h1>) внутри (и вызов div .limitheader); попробовал -webkit-text-size-adjust:100%; внутри довольно много всего контейнера или anhywhere я мог; используя @media, чтобы определить, как это должно выглядеть на iphone ...
Я думаю, что, возможно, я их испортил или просто не делал правильно. Если кто-то может дать мне решение, пока он работает (и держит размер, подходящий только экрану iphone), это было бы потрясающе. Я также не понимаю, почему остальная часть контента просто не заполняется вправо. Anyways ...
UPDATE: Я не обновлял правый CSS-файл. Теперь проблема заключается в следующем: я не могу присвоить разные значения letter-spacing в @media(min-width:768px) и @media(max-width:767px). Если я назначаю разные значения, он берет один из большего размера экрана и применяет его в каждом размере.
Это мой код:
HTML
<header>
<div class="header-content">
<div class="header-content-inner">
<div class="limitheader"><h1>TOURBILLON</h1></div>
</div>
</div>
</header>
CSS
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #F9C000;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .header-content {
position: relative;
width: 100%;
padding: 100px 15px;
text-align: center;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
font-family: 'Conduit';
color: #F9C000;
letter-spacing: 20px;
margin-right: auto;
margin-left: auto;
max-width: 100vh;
-webkit-text-size-adjust:100%;
}
.limitheader {
max-width: 100vh;
}
header .header-content .header-content-inner hr {
margin: 30px auto;
}
header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 300;
color: #F9C000
;
}
@media(min-width:768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
@media(max-width:767px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
font-family: 'Conduit';
color: #F9C000;
margin-right: auto;
margin-left: auto;
max-width: 100vh;
-webkit-text-size-adjust:100%;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
СПАСИБО!
ничего. Это так странно. Я даже пробовал: 'header h1 { переход: 0.3s размер шрифта; } '' @media (max-width: 400px) { h1 { Размер шрифта: 21px! Important; } header .header-content.header-content-inner h1 { font-size: 7vw; } } ' – votgaus
правильно, я глуп. Я редактировал неправильный документ CSS и обновлял тот, который не менял. Теперь все происходит, по крайней мере, когда я меняю его. Он все еще не работает. Я собираюсь отредактировать сообщение с новой проблемой. – votgaus