Почему мои элементы сетки не накладываются друг на друга при использовании медиазапросов? - PullRequest
Новая
       55

Почему мои элементы сетки не накладываются друг на друга при использовании медиазапросов?

1 голос
/ 10 марта 2019

Я пытаюсь заставить свои элементы сетки, которые составляют только 2 деления, складывать друг на друга, используя медиа-запросы, но независимо от того, что я изменяю, ничего не меняется. Я полагал, что изменение моих 3 столбцов на 1 столбец будет работать для моего медиа-запроса ... но все равно ничего. Дайте мне знать, что я делаю неправильно, потому что, что бы я ни пытался, ничего не изменится.

HTML 

<div class="showcase-grid">
        <div class="showcase-content">
          <h1 class="showcase-heading">
            My name is Edward Kelley and I strive to make the web 
awesome.
          </h1>
          <p class="showcase-text">
            I help businesses get noticed with fresh and innovative 
content.
            <br />Need something different for your business? Let's 
get in
            touch!
          </p>
          <button class="showcase-btn-1">About me</button>
          <button class="showcase-btn-2">Contact</button>
        </div>
        <div class="showcase-background-img">
          <img src="https://images.pexels.com/photos/847402/pexels- 
   photo-847402.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" />
        </div>
      </div>

SCSS 

.showcase-grid {
grid-template-columns: repeat(3, 1fr);
display: grid;
align-items: center;

.showcase-content {
  grid-column: 1 / 3;

  .showcase-heading {
    font-size: 2.5rem;
    font-weight: 600;
  }

  .showcase-text {
    padding-top: 2rem;
    color: #828282;
  }

  .showcase-btn-1 {
    border: 2px solid #4f6df5;
    font-size: 0.9rem;
    background-color: white;
    color: #4f6df5;
    padding: 1rem 1.5625rem;
    cursor: pointer;
    border-radius: 4px;
    width: 170px;
    transition: all 0.3s ease 0s;
    font-weight: 600;
  }

  .showcase-btn-1:hover {
    background-color: #4f6df5;
    color: white;
  }

  .showcase-btn-2 {
    color: white;
    background-color: #4f6df5;
    font-size: 0.9rem;
    border: solid 2px #4f6df5;
    padding: 1rem 1.5625rem;
    cursor: pointer;
    width: 170px;
    border-radius: 4px;
    transition: all 0.3s ease 0s;
    margin-left: 0.5rem;
    margin-top: 2rem;
    font-weight: 600;
  }

  .showcase-btn-2:hover {
    color: #4f6df5;
    border: 2px solid #4f6df5;
    background-color: white;
  }
}

.showcase-background-img {
  grid-column: 4;

  img {
    width: 420px;
  }
}
}


@media screen and (max-width: 768px) {
  .showcase-grid {
grid-template-columns: 1fr;
}
}

1 Ответ

0 голосов
/ 10 марта 2019

Проблема в том, что вы явно устанавливаете свой grid-column.Измените grid-column: 1/3 на grid-column: span 2 и покончите с grid-column: 4 - см. Демонстрацию ниже: 

.showcase-grid {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  align-items: center;
}

.showcase-grid .showcase-content {
  grid-column: span 2; /* CHANGED */
}

.showcase-grid .showcase-content .showcase-heading {
  font-size: 2.5rem;
  font-weight: 600;
}

.showcase-grid .showcase-content .showcase-text {
  padding-top: 2rem;
  color: #828282;
}

.showcase-grid .showcase-content .showcase-btn-1 {
  border: 2px solid #4f6df5;
  font-size: 0.9rem;
  background-color: white;
  color: #4f6df5;
  padding: 1rem 1.5625rem;
  cursor: pointer;
  border-radius: 4px;
  width: 170px;
  transition: all 0.3s ease 0s;
  font-weight: 600;
}

.showcase-grid .showcase-content .showcase-btn-1:hover {
  background-color: #4f6df5;
  color: white;
}

.showcase-grid .showcase-content .showcase-btn-2 {
  color: white;
  background-color: #4f6df5;
  font-size: 0.9rem;
  border: solid 2px #4f6df5;
  padding: 1rem 1.5625rem;
  cursor: pointer;
  width: 170px;
  border-radius: 4px;
  transition: all 0.3s ease 0s;
  margin-left: 0.5rem;
  margin-top: 2rem;
  font-weight: 600;
}

.showcase-grid .showcase-content .showcase-btn-2:hover {
  color: #4f6df5;
  border: 2px solid #4f6df5;
  background-color: white;
}

/*.showcase-grid .showcase-background-img {
  grid-column: 4;
}*/

.showcase-grid .showcase-background-img img {
  width: 420px;
}

@media screen and (max-width: 768px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
}
<div class="showcase-grid">
  <div class="showcase-content">
    <h1 class="showcase-heading">
      My name is Edward Kelley and I strive to make the web awesome.
    </h1>
    <p class="showcase-text">
      I help businesses get noticed with fresh and innovative content.
      <br />Need something different for your business? Let's get in touch!
    </p>
    <button class="showcase-btn-1">About me</button>
    <button class="showcase-btn-2">Contact</button>
  </div>
  <div class="showcase-background-img">
    <img src="https://via.placeholder.com/200" alt="" />
  </div>
</div>
...