Блог

Я работаю над личным проектом, и у меня проблема с перекрытием при изменении размера окна. В основном до сих пор моя страница разделена на 3 раздела: заголовок (который является липким), середина / герой и последний раздел с продуктами.

Проблема в том, что когда я делаю свою страницу менее высокой, изображения с кофе перекрывают текст.

Мой код здесь:

   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  height: calc(100vh - 64px);
  width: calc(100vw - 64px);

  justify-content: center;
}

.text-section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.05em;
  margin: 0 5vw 0 5vw;
  padding: 0 2vw 0 2vw;
}

.text-section h2 {
  font-size: 2em;
  font-weight: 600;
  padding-bottom: 1em;
}

/* <p> color */
.ph {
  color: #3c4043;
}

.image-section {
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url(https://www.illy.com/dw/image/v2/BBDD_PRD/on/demandware.static/-/Sites-masterCatalog_illycaffe/default/dw9a7f00e7/products/Coffee/Coffee-Ground/9893ME_coffee_ground-espresso_can-classico-roast-250gr-zagnoli-decorated_illy-shop/DecoratoOZ_GroundClassico_800x800px.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  min-height: 15em;
  margin: 2vw;
}

.main-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  justify-content:space-between;

}

.illy,
.lavazza,
.starbucks {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15em;
  height: 25em;
}
  

https://codepen.io/claudiuu/full/ZEWmRzR

вот перекрытие