sliderとheaderの間の余白を消したい。

Question

ホームページ作りの練習をしている初心者です。
sliderの作り方をネットで調べてコピペしてなんとか作ったのですが、レスポンシブ対応でつまずいてしまいました。
スマホサイズでのcssを検証しながら作成しています。

[html]
 <div class="slider">
   <div class="image"><img src="img/girl01.jpg"></div>
   <div class="image"><img src="img/girl02.jpg"></div>
   <div class="image"><img src="img/girl01.jpg"></div>
   <div class="image"><img src="img/girl02.jpg"></div>
 </div>
 <header>
   <a href="#" class="toppage">TopPage</a>

   <div class="contact">
     <a href="contact.html" class="faa-parent animated-hover">contactform <i 
     style="color: #ff8e61ee;" class="faa-wrench fa fa-envelope fa-fw"></i></a>
   </div>
 </header>


[css]
.slider {
  width: 100%;
  height: 50vh;
}
.slider img {
  width: 100%;
  height: 50vh;
}

スマホ対応では余白は無く、pcサイズ画面の場合に、sliderとheaderの間の余白が出来てしまいます。

そこでスマホ対応のcssでsliderのheightを50vhにしてみると、headerがsliderの裏に隠れてしまいます。
知識不足で不甲斐ないですが、原因と改善策をご教授お願い致します。

Comments

[k_a]

ご掲示のコードだけでは状況が再現できません。
すべて掲載する必要はありませんが、最低限起きている問題をそのまま再現できるコードを掲載して下さい。

Answer 1

単純な間違えをしていました。
vwをvhと間違えていたため、高さが合わないだけでした。
max-width(670px)のcssでsliderクラスのheightを50vwに変更したら無事余白が消えました。
大変失礼致しました。