Я впервые работаю с сетками CSS, и я немного удивлен тем, что они могут сделать. Я особенно люблю трюк. Однако я столкнулся с проблемой, которая дает мне припадки.
Я хочу объединить сетку CSS и медиазапрос, чтобы при достижении определенного размера окна просмотра второй столбец больше не отображался. Проверьте. Эта часть сделана. Часть, которую я не могу понять, как выполнить sh, однако, такова:
Я хочу, чтобы текст, который я сказал, был выровнен по центру, чтобы выровняться по центру по строке после удаления другого столбца , В нынешнем виде он сохраняет положение, в котором он находился, когда присутствовал другой столбец.
Также столбец 2 имел фиксированную высоту, но когда столбец скрыт с помощью медиазапроса, высота оставшегося столбца равна теперь меньше. Он даже не остается достаточно высоким, чтобы вместить весь его оригинальный контент. Я могу частично исправить это, назначив обоим столбцам одинаковую явную высоту или минимальную высоту, но странным образом, когда я это делаю, вертикальное выравнивание столбца больше не центрируется и перемещается к верхней части контейнера.
/* - Code Requested by Commenter - */
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
line-height: 1.7;
}
h1 {font-family: "Roboto Condensed", sans-serif}
h2 {font-family: "Roboto", sans-serif}
body,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.pagecontainer {
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 0;
}
.nav-container {
width: 100%
height: 70px;
z-index: 9999;
}
.navbar {
width: 100%;
height: 100%;
line-height: 72px;
z-index: 9999;
margin: auto;
top: 0;
padding: 0 16px 0 0;
overflow: hidden;
background-color: #fff!important;
box-sizing: border-box;
font-size: 17px;
}
.navbar a {
color: #777;
text-decoration: none;
}
.navbar a:hover {
background-color: #bbb;
color: #fff;
}
.nav-right {
float: right!important;
}
.navlogo {
width: auto;
height: 72px;
padding: 0;
vertical-align: middle;
}
.navbar .navbar-item {
padding: 0 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0;
}
.navbar-block .navbar-item {
width: 100%;
display: block;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
/* common styles used throughout */
.center-text {
text-align: center;
}
.big-text {
font-size: 20px!important;
}
.huge-text {
font-size: 64px!important;
}
/* Full height header */
.header {
background-position: center;
background-size: cover;
background-image: linear-gradient(to top right, rgba(0, 0, 45, .92), rgba(45, 0, 0, 0.66)), url("../images/headerImage.jpg");
min-height: 90vh;
}
.header-display-left {
position: absolute;
top:50%;
left:0%;
padding: 50px;
transform:translate(0%,-50%);
-ms-transform:translate(-0%,-50%)
}
.header-white-text {
color: #fff;
}
.h1-header {
font-size: 36px;
line-height: 0.2;
}
.h2-header {
font-size: 28px;
}
.header-description {
max-width: 584px;
font-size: 14px;
line-height: 1.9;
}
.header-description a {
font-size: 16px;
color: #fff;
text-decoration: none;
background-color:rgba(205, 0, 0, .6);
padding: 10px 25px;
border-radius: 11px;
}
.header-description a:hover {
background-color:rgb(205, 0, 0);
padding: 10px 25px;
border-radius: 11px;
}
.header-display-bottomleft {
position:absolute;
left:0;
bottom:0;
}
.header-fa {
font-size:20px!important;
color: #888!important;
padding: 0px 0px 48px 48px;
}
.header-fa a {
font-size:20px!important;
color: #888!important;
padding: 0px 0px 48px 0;
}
.fa-hover:hover {
color: #eee;
}
.fa-hover a:hover {
color: #eee;
}
.about-container {
padding: 80px 40px;
}
/* row stylings */
.max-4-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-column-gap: 28px;
padding: 0 8px;
align-items: center;
}
/* - All Code Above Requested by Commenter - */
.split-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px;
align-items: center;
background-color: #420000;
height: 460px;
}
.leftsplit {
color: #fff!important;
margin: auto;
align-items: center;
position: relative;
height: 100%;
}
.rightsplit {
background-size: cover;
background-position: center;
background-image: linear-gradient(to top right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url("../images/berries.jpg");
height: 100%;
position: relative;
}
.services-text {
text-shadow: 2px 1px 2px rgba(255, 255, 0, 0.8);
font-size: 42px;
font-weight: 800;
}
/* - Requested Media Queries - */
/* Media Queries */
@media (max-width: 960px) {
.hide-mobile {
display: none!important;
}
}
@media (min-width: 960px) {
.hide-desktop {
display: none!important;
}
}
@media (max-width: 700px) {
.rightsplit {
display: none!important;
}
.split-container {
grid-template-columns: 1fr;
}
}
<div class="split-container" id="services">
<div class="column leftsplit center-text">
<h2 class="services-text">Our Services</h2>
<p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 1</p>
<p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 2</p>
<p class="services-description big-text"><i class="fa fa-angle-right"></i> Service 3</p>
</div>
<div class="column rightsplit"></div>
</div>
Посмотрите, что происходит, когда я изменяю размер здесь