网格模板区域项目在特定屏幕尺寸上消失

Question

我的网格模板区域遇到麻烦，在特定的屏幕尺寸上，只有一个网格模板区域项仍然可见。我正在使用WordPress和“高级自定义”字段。我有一种感觉我做错了，所以如果您可以看一下我的代码，我将不胜感激。谢谢。

模板：

<?php
/*
 * Template name: fullwidth-second-landing
 * 
 *
 * 
 */

get_header('secondary');
?>

    <div class="image-holder">
    <div class="image-overlay"></div>
        <img src="<?php the_field('full_width_image'); ?>" alt="">
        <div class="text-overlay">
            <div class="full-screen-image-text">
                <h1 class="image-text"><?php the_field('full_screen_image_text'); ?></h1>
            </div>
            <div class="link-holder">
                <a class="full-screen-button-text" href="<?php the_field('full_screen_image_button_link'); ?>"><?php the_field('full_screen_image_button_text'); ?></a>
            </div>

        </div>

    </div>

    <div class="spacer" style="height: 95px;"></div>
    <div class="container-blocks">
        <h2 class="subheading-title"><?php the_field('subheading_for_landing'); ?></h2>
        <p class="first-text"><?php the_field('first_text'); ?></p>
    </div>
    <div class="spacer" style="height: 95px;"></div>

        <div class="full-width-grid">
            <div class="box1" style="background-color: #<?php the_field('box_1_hex_value'); ?>">
                <div class="box-content">
                    <h4 class="box-pre-header"><?php the_field('box_1_preheader'); ?></h4>
                    <h3 class="box-header"><?php the_field('box_1_main_header'); ?></h3>
                    <p class="box-text"><?php the_field('box_1_text'); ?></p>
                    <a class="box-button-text" href="<?php the_field('box_1_button_link'); ?>"><?php the_field('box_1_button_text'); ?></a>
                </div>
            </div>
            <div class="box2" style="background-image: url(<?php the_field('box_2_image'); ?>);">
            </div>
            <div class="box3" style="background-image: url(<?php the_field('box_3_image'); ?>);">
            </div>
            <div class="box4" style="background-color: #<?php the_field('box_4_hex_value'); ?>">
            <div class="box-content">
                    <h4 class="box-pre-header"><?php the_field('box_4_preheader'); ?></h4>
                    <h3 class="box-header"><?php the_field('box_4_main_header'); ?></h3>
                    <p class="box-text"><?php the_field('box_4_text'); ?></p>
                    <a class="box-button-text" href="<?php the_field('box_4_button_link'); ?>"><?php the_field('box_4_button_text'); ?></a>
                </div>
            </div>
        </div>
        <div class="spacer" style="height: 95px;"></div>

<?php
get_footer('terciary');

CSS

.image-holder {
  display: inline-block;
  background-repeat: no-repeat; 
  background-position: bottom right;
  overflow: hidden;
  position: relative; 
  width: 100%; 
  max-height: 75vh!important;
  margin: 0; 
  padding: 0;
}

@media (max-width: 501px) {
  .image-holder img {
    margin-top: 84px!important;
  }
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; 
  right: 0;
  background-color: rgba(0,0,0,0.75);
}

.full-screen-image .text-overlay {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.text-overlay .full-screen-image-text {
  position: absolute;
  left: 3%;
  top: 25%;
}

.full-screen-image-text h1 {
  font-size: 52px;
  color: #fff!important;
  line-height: 1.2;
  font-weight: normal; 
}

@media (max-width: 1700px) {
  .full-screen-image-text h1 {
    font-size: 48px!important;
  }
}

@media (max-width: 700px) {
  .full-screen-image-text h1 {
    font-size: 36px!important;
    margin-top: 20px;
  }
}



.text-overlay .link-holder {
  position: absolute;
  top: 75%;
  left: 3%;
}

@media (max-width: 700px) {
  .text-overlay .link-holder {
    top: 80%;
  }
}

.link-holder a {
  background-color: #5152be;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  border-radius: 8px;
}

a.full-screen-button-text:hover {
  color: #ccc;
}

.spacer {
  box-sizing: border-box;
}

.container-blocks {
  width: 80%;
  margin: 0 auto;
}

.subheading-title {
  margin-top: 20px;
  text-align: center;
}

.subheading-title {
    color: #444950!important;
    font-size: 30px;
    line-height: 37px;
}

.first-text {
  color: #444950!important;
  font-size: 18px!important;
  line-height: 26px;
  text-align: center!important;
}

.box2,
.box3 {
  display: inline-block;
  background-repeat: no-repeat; 
  background-position: center;
  overflow: hidden;
  position: relative; 
  width: 100%; 
  margin: 0;
  padding: 0;
}

.box1 { grid-area: left-box;}
.box2 { grid-area: right-box;}
.box3 { grid-area: left-box-3;}
.box4 { grid-area: right-box-4;}

.full-width-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: 
    'left-box right-box'
    'left-box-3 right-box-4';
}



.box1,
.box4 {
  padding: 85px;
  display: flex;
  align-items: center;
  justify-content: center
}

.box2,
.box3 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.box-pre-header,
.box-header,
.box-text,
a.box-button-text {
  color: #fff!important;
}

a.box-button-text {
  border: 3px solid #fff;
  border-radius: 3px;
  padding: 10px 15px;
}

.box-pre-header {
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 18px;
}

.box-header {
  color: #fff!important;
  font-size: 30px;
  line-height: 37px;
}

.box-content {
  width: 80%;
}

@media (max-width: 1100px) {
  .box-content {
    width: 90%;
  }
  .box1,
  .box4 {
    padding: 50px;
  }
}

@media(max-width: 1200px) {
 .grid-container {
  grid-template-columns: 100%;
}
}

@media (max-width: 900px) {
  .full-width-grid {
    grid-template-areas:
      'right-box right-box'
      'left-box left-box'
      'left-box-3 left-box-3'
      'right-box4 right-box4';
  }
}

有问题的网站是：http://vitalityevo.wpengine.com/2nd-landing-test/

Answer 1

我通过添加grid-template-rows 1fr 1fr和媒体查询grid-template-rows: 1fr 1fr 1fr 1fr来解决此问题

另外，我有一个拼错的CSS选择器。 right-box4必须为right-box-4