Diva się obniża

Question

Witam mam 2 pytania. 1 pytanie brzmi czemu jak dodaję tekst do pierwszego diva screen:

to ten 1 div się obniża po dodaniu tego tekstu. Jak to rozwiązać?
2 pytanie czemu w tych divach nie mogę umieścić background-image?
prosił bym o pomoc z góry dziękuje!
kod: https://codepen.io/AgentTecza/pen/xxgqywN

Comments

mc diva

Answer 1

Propozycja zmian:  

<div class="slider-container">
  <div class="slider-title">
    <h2>ELOOOO</h2>
  </div>
  <div class="slider-wrap">
    <div class="slider-kwa img-one">
      <span class="text-slider">wasf</span>        
    </div>
    <div class="slider-kwa img-two"></div>
    <div class="slider-kwa"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}
.slider-container {
  width: 95vw;
  margin: 0 auto;
}
.slider-container .slider-title { 
  font-family: 'Recursive', sans-serif; 
  font-size: 35px;
  text-align: center;
}
.slider-wrap {
  display: flex;
  flex-direction: row;
}
.slider-wrap .slider-kwa {
  width: 33%;
  height: 400px;
  margin: 50px 42px 0 42px;
  border: 2px solid black;
  text-align: center;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.slider-wrap .img-one {
  background-image: url(http://websamuraj.pl/examples/yt/scrollHeader/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: -100px -205px;
}
.slider-wrap .img-two {
  background-image: url(https://source.unsplash.com/400x401);
  background-repeat: no-repeat;
}
.slider-wrap .slider-kwa:last-child {
  background-image: url(https://source.unsplash.com/400x402);
  background-repeat: no-repeat;
}
.slider-wrap .text-slider {
  position: relative;
  top: 360px;
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Recursive', sans-serif;
  font-size: 25px;
  color: white;
  background-color: rgba(10,60,10,0.5)
}

Answer 2

to ten 1 div się obniża po dodaniu tego tekstu. Jak to rozwiązać?

Wyjaśnienie problemu → https://stackoverflow.com/a/51857106/4983840

Naprawić to możesz dodając mu vertical-align: middle;

2 pytanie czemu w tych divach nie mogę umieścić background-image?

Jest tam literówka bbackground-image i niepoprawny selektor, który traktuje, że .slider-kwa jest pierwszym dzieckiem parenta, a w rzeczywistości nie jest - poprzedza go <h2 class="slider-title">. Bardziej nada się tam pseudo klasa :first-of-type. Chociaż i tak bezpieczniej jest oddzielić te kafelki od nagłówka wrzucając je do własnego kontenera i wtedy :first-child zadziała.