Я застрял, пытаясь найти подходящее решение; без добавления большого количества div в мою разметку.
Мне нужен контент в медиа-запросе 1200 пикселей; оставаться на уровне 1200 и в центре. Что работает.
Однако строки содержат фоновые цвета, тени и т. Д. c. чтобы оставаться 100% ширины.
Любые указания, как лучше всего решить эту проблему; был бы очень признателен.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
input[type=text] {
font-size: 1.5rem; padding: 0 0.25em 0 1.2em; height: 4rem;
line-height: 4rem; width: 50vw; color: #333;
background: #f5f5f5; border: 1px solid #f5f5f5;
}
.head_sticky {
position: sticky; top: 0; z-index: 100;
}
@media only screen and (max-width: 599px) {
.col-m-1 { width: 16.67%; } .col-m-2 { width: 33.33%; } .col-m-3 { width: 50.00%; }
.col-m-4 { width: 66.67%; } .col-m-5 { width: 83.33%; } .col-m-6 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 16px 5px 0;
}
.search_form_cls {
height: 4.5rem; line-height: 4.5rem; font-size: 3rem;
color: black; border: none; background: transparent;
}
input[type=text] {
width: 75vw;
}
}
@media only screen and (min-width: 600px) {
.col-t-1 { width: 12.5%; } .col-t-2 { width: 25%; } .col-t-3 { width: 37.5%; }
.col-t-4 { width: 50%; } .col-t-5 { width: 62.5%; } .col-t-6 { width: 75%; }
.col-t-7 { width: 87.5%; } .col-t-8 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 24px 5px 0;
}
}
@media only screen and (min-width: 768px) {
.col-d-1 { width: 8.33%; } .col-d-2 { width: 16.66%; } .col-d-3 { width: 25% }
.col-d-4 { width: 33.33% } .col-d-5 { width: 41.66% } .col-d-6 { width: 50%; }
.col-d-7 { width: 58.33%; } .col-d-8 { width: 66.66%; } .col-d-9 { width: 75%; }
.col-d-10 { width: 83.33%; } .col-d-11 { width: 91.66% } .col-d-12 { width: 100%; }
[class*='col-'] {
float: left; padding: 5px 28px 5px 0;
}
}
@media only screen and (min-width: 1200px) {
.A3_row {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
[class*='col-']:first-of-type {
padding-left: 16px;
}
[class*='col-']:last-of-type {
padding-right: 16px;
}
.A3_row {
display: flex; background-color: white;
}
.A3_row [class*='col-'] {
display: flex; align-items: center; flex-wrap: wrap;
}
.A3_row::after {
content: ""; clear: both; display: table;
}
.navigation_link
text-decoration: none; color: black;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id='head' class='A3_row shadow_bottom head_sticky'>
<div class='col-m-1 col-t-1 col-d-1'>
<span class='navigation_link'>☰</span>
</div>
<div class='col-m-2 col-t-2 col-d-2'>
LOGO
</div>
<div class='col-m-3 col-t-5 col-d-9 t-end'>
<input autocomplete='off' name='q' class='search_form_m' type='text' placeholder='Search' value='' maxlength='100'>
</div>
</div>
<div class='A3_row' style='background-color:blueviolet; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:blueviolet;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row' style='background-color:gold; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:gold;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row' style='background-color:lightseagreen; font-size: 1.5em; font-weight: bold;'>
<div class='col-m-6 col-t-8 col-d-12'>Heading</div>
</div>
<div class='A3_row' style='background-color:lightseagreen;'>
<div class='col-m-6 col-t-8 col-d-12' style="overflow-x: scroll; overflow-y: hidden; width: 100%;">Content</div>
</div>
<div class='A3_row'>
<div class='col-m-6 col-t-8 col-d-12' style='align-items: flex-start'>
<span>FOOTER</span>
</div>
</div>
</body>
</html>