Как вы используете Media Queria, чтобы скрыть столбец из сетки отображения и настроить интервал в оставшемся столбце? - PullRequest
Новая
       23

Как вы используете Media Queria, чтобы скрыть столбец из сетки отображения и настроить интервал в оставшемся столбце?

0 голосов
/ 22 февраля 2020

Я впервые работаю с сетками 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>

Посмотрите, что происходит, когда я изменяю размер здесь

Ответы [ 2 ]

0 голосов
/ 22 февраля 2020

Медиа-запрос был решен путем сброса .split-container, как подсказал @Mahatmasamatman. Проблема с вертикальным интервалом была исправлена ​​путем назначения явной высоты контейнеру сетки ".split-container", а затем присвоения моему левому столбцу div (.leftsplit) высоты 140 пикселей с полем 0 и относительным позиционированием. Затем я помещаю свой текст .services в поле auto с полем нижнего поля -5px. Наконец, я установил поле для .services-description для auto. Это была большая работа, но я думаю, что достиг того, что хотел. 

.split-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0px;
    align-items: center;
    background-color: #420000;
    height: 460px;
    text-align: center;
}

.leftsplit {
    color: #fff!important;
    margin: auto;
    align-items: center;
    position: relative; 
    height: 140px;
    display: grid;
}

.rightsplit {
    background-size: cover;
    background-position: center;
    background-image: url("../images/berries.jpg");
    height: 100%;
}

.services-text {
    font-size: 42px;
    margin: auto;
    margin-bottom: -5px;
}

.services-description {
    margin: auto;
}

/* Media Query */
@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>
0 голосов
/ 22 февраля 2020

В то же время вы скрываете правую колонку, вам следует сбросить сетку, чтобы оставшаяся колонка заняла всю строку. 

@media (max-width: 700px) {
    .rightsplit {
        display: none!important;
    }
    .split-container{
       grid-template-columns: repeat(1, 1fr);
    }
}
...