Div ориентирован на рабочий стол, а не на мобильное устройство
При центрировании одного div внутри другого я добиваюсь успеха на рабочем столе, я пробую встроенное в Chrome изменение разрешения «проверить», но на «мобильном» div остается внизу другого div. Может ли кто-нибудь помочь и понять, почему div сосредоточен в «режиме рабочего стола», а не в «мобильном режиме»? Спасибо
.headercontainer {
overflow-y: hidden;
}
.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 2em;
z-index: -1;
position: fixed;
margin-left: -40%;
margin-top: -50px;
height: 100px;
transform: translateY(-50%);
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: 'Raleway', sans-serif;
white-space: nowrap;
text-transform: uppercase;
text-align: center;
}
.header-image {
background-image: url("images/Westminster.jpg");
background-position: center center;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 5em;
height:60vh;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
position:relative;
z-index: -3;
}<div class = "headercontainer">
<div class = "header-image">
<div class = "header-title">
<h1> Anarchists and Autocrats </h1>
</div>
</div>
</div>Вы можете установить height: 100% как для head, так и для body и .headercontainer.
Ответы 1
Вы должны использовать position:absolute вместо position:fixed.
Пройдите по моей ссылке JSFiddle или попробуйте написанный ниже код:
HTML-код -
<div class = "headercontainer">
<div class = "header-image">
<div class = "header-title">
<h1> Anarchists and Autocrats </h1>
</div>
</div>
</div>
Код CSS -
.headercontainer {
overflow-y: hidden;
position: relative;
}
.header-title {
width: 80%;
height: 100px;
top: 50%;
font-size: 2em;
z-index: -1;
position: absolute;
height: 100px;
transform: translateY(-50%);
}
.header-title h1 {
color: #404040;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
text-align: center;
}
.header-image {
background: url("https://www.nyhabitat.com/blog/wp-content/uploads/2013/10/westminster-london-houses-parliament-big-ben-thames-river.jpg") center/ cover;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding: 5em;
height: 60vh;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
z-index: -3;
}
вместо того, чтобы давать ему код, для будущих пользователей было бы более информативно объяснить, что было не так с исходным кодом
Я обновил свой код. @pandavenger. Также я предлагаю решение, чтобы пользователь мог видеть его вживую.
Привет. Это работает, но мне действительно нужно, чтобы текст не двигался, а был исправлен. Есть ли способ это сделать, или это невозможно?
Попробуйте сохранить font-size вашего текста в соответствии с размером экрана, используя запрос media в CSS. @SimplySnap
Ты знаешь, как я бы это сделал? Извините за беспокойство
Прочтите о том, как использовать запросы media в CSS и сделать текст font-size в соответствии с размером устройства. @SimplySnap
Я действительно ненавижу раздражать, но, используя запрос @media, могу ли я увеличить размер шрифта, чтобы он оставался по центру, в фиксированном положении? Еще раз спасибо
Да, вы можете увеличить или уменьшить font-size с помощью media query. @SimplySnap Вы также можете увидеть живые примеры, такие как example1 и пример2.
Большое спасибо! И вы порекомендуете мне уменьшать размер шрифта по мере того, как окно становится меньше?
Если текст выходит за пределы экрана на небольших устройствах, вам следует уменьшить его, чтобы сохранить на экране, иначе вы можете оставить его. @SimplySnap
Вы должны использовать гибкость для центрирования.