0
У меня есть макет страницы, который я хотел бы сделать отзывчивым. В настоящее время страница разбита на 50/50 по центру вертикально. Я достиг этого, сделав раздел div display в виде таблицы и div внутри внутри ячейки. У меня также есть абсолютное положение Title в верхнем центре страницы.Создание страницы с вертикальным разделением в ответ
Я хотел бы сделать так, что, когда страница просматривается на меньшем экране (например, планшете или мобильном телефоне), разделение 50/50 становится горизонтальным, при этом весь текст содержит центральную ориентацию по горизонтали и вертикали, а также заголовок оставаясь в верхнем центре страницы.
Вот мой код:
html,
body,
section,
div {
height: 100%;
}
body {
color: #000000;
font-family: Cinzel, serif;
font-size: 1.25rem;
line-height: 150%;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
div {
width: 50%;
padding: 1rem;
}
h1 {
font-size: 1.75rem;
}
.logo {
text-align: center;
color: red;
position: absolute;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.left-half {
background: #FFFFFF;
color: #000000;
}
.right-half {
background: #000000;
color: #FFFFFF;
}<body>
<section class="container">
<header class="logo">
<h1>Title</h1>
</header>
<div class="left-half cell">
<h1>First Half</h1>
</div>
<div class="right-half cell">
<h1>Second Half</h1>
</div>
</section>
</body>Любая помощь будет принята с благодарностью.
В чем вопрос? –
Ваш вопрос не очень ясен, но угадайте, что вы ищете для запросов 'media' ... – kukkuz