position: fixed;でできる隙間をなくしたい

Question

position: fixed;でできる隙間をなくしたい

模写しています。
スマホ対応するようメディアクエリの中にposition: fixed;を使用しています。
（PC用とスマホ用のみで作成しています。PC用にはメディアクエリを使用せず、そのままcssに打ち込んでいます）

PC用にもメディアクエリを指定しないといけないのでしょうか？
メディアクエリ指定せずに打ち込んだものがPC用になるり、メディアクエリ指定したものがその画面幅のものに対応する（今回はスマホ用）と考えていますが、間違いでしょうか？

お手本サイト

<header>
  		<div class="header">
          <div class="logo2"></div>
          <div class="tagline">かわいいが届くお花便</div>
          <div class="badges">
            <a class="app-badge" href="https://apps.apple.com/jp/app/flower-%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84%E3%81%8C%E5%B1%8A%E3%81%8F%E3%81%8A%E8%8A%B1%E4%BE%BF/id1434272434?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2019-02-18&kind=iossoftware&bubble=ios_apps) no-repeat;width:164px;height:40px;"></a>
            <a    href='https://play.google.com/store/apps/details?id=co.rollcake.flower&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img class="googleplay-badge" style='margin-top:-32px;' alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png'/></a>
          </div>

          <p>*北海道、沖縄、離島エリアは現在対象外です</p>
        </div>

  	</header>

.header{
	max-width: 100vw;
 	text-align: center;
 	position: relative;
 	background-image: url(../images/no2.png);
 	width: 100vw;
    height: 100vh;
	background-size: cover;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}
.badges{
	position: absolute;
	top:80%;/*これを削除するとスマホ用では隙間はなくなりますが、PC用で問題が生じます*/
	left: 0;
	right: 0;
	margin: auto;
}

@media screen and (max-width: 768px){
	.header{
		position: relative;
	}
	.badges{
		position: static;
		box-sizing: border-box;
		position: absolute;
		display: block;
		width: 100vw;
		height: 96px;
		background-color: #F5F2F5;
		position: fixed;
		bottom: 0;
*animation: none;*/
	}
}

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
下、手本。

Answer 1

これを削除するとスマホ用では隙間はなくなりますが、PC用で問題が生じます

上記コメントに従うと、top: 80%;を
PC側からは削除し、スマホ (768px以下) のサイズのメディアクエリ内に記述すればいいだけ、
ではないでしょうか?

訂正します。PCにはtop: 80%;を指定したまま、スマホでは初期値のautoを指定してみるといかがでしょうか?

.badges {
    top: 80%;/*これを削除するとスマホ用では隙間はなくなりますが、PC用で問題が生じます*/
}
@media screen and (max-width: 768px) {
    .badges {
        /* メディアクエリ内に追加。PCでの記述を上書き */
        top: auto;
    }
}

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/top

Comments

[kei344]

「これを削除すると･･･PC用で問題が生じます」なので逆ではないでしょうか。

[new1ro]

確かに、逆でしたね..、ありがとうございます。
回答を編集します。

Answer 2

    .badges{
        box-sizing: border-box;
        display: block;
        width: 100vw;
        height: 96px;
        background-color: #F5F2F5;
        position: fixed;
        bottom: 0;
        top: auto;
    }