ウェブサイトをスマホやタブレットで見るとPCで見た時より画像と画像の間の隙間が大きくなる

前提・実現したいこと

スマホでもタブレットでもPCでも綺麗に見れるレスポンシブサイトを作っています。

発生している問題・エラーメッセージ

スマホやタブレットで見るとPCで見た時より、トップ画像とセレクト画像の間の隙間が大きくなってしまいます。
PCでみたときと同じ隙間にするにはどうしたらいいでしょうか？

試したこと

スマホ用で試してみて、

#test1-sec {
    width:100%;
    margin:  0 auto;
    margin-top:120px;
    border-top: solid 10px #2d4283;
}

ここのmargin-top:120px;をmax-width: 767px;に変えてみましたがPCと同じにはなりませんでした。
また、120pxを6vhなどにしてみましたが結果は同じでした。

ワードプレスのtwentynineteen5.8.2を使って作っています。

HTML

<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<?php wp_head(); ?>
</head>

<body>
<header>
<h1>TEST</h1>
<nav>
<!--ロゴー-->
<div class="logo"></div>
<!--メニュー-->
<div class="main-m-list-menu" id="drawer">
 <input id="input" type="checkbox" class="unshown">
  <label id="open" for="input"><span></span></label>
  <label class="unshown" id="close" for="input"></label>
<div class="gfh-menu">
<ul>
	<li class="menu-li1"><a href="index.html">HOME</a></li>
	<li class="menu-li1"><a href="#test1">TEST1</a></li>
	<li class="menu-li1"><a href="#test2">TEST2</a></li>
	<li class="menu-li2"><a href="#test3">TEST3</a></li>
	</ul>
	</div>
	</div>
</nav>
</header>

<!--トップ画像ー-->
<section id="top-sec">
<div class="topimg">
</div>
</section>

<!--test1-->
<section id="test1-sec">
	<h2>TEST1</h2>
<!--セレクト画像-->
<div class="sec-test1-img"></div>
</section>

CSS


* {
	margin:0;
}

h1,h2 {
		display:none;
}
	
li {
		list-style:none;
}

#input {
	display:none;
}

/*スマホ*/
@media screen and (min-width:280px) and ( max-width:767px) { 
	
header {
	width:100%;
	background-color:#2d4283;
	padding-top:10px;
	padding-bottom:10px;
}
	
nav {
		justify-content: center;
    align-items: center;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	margin:  0 auto;
	}

.logo {
	background-image:url('img/logo.png');
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	height:70px;
}
	
	/*ハンバーガーメニュー*/
#drawer {
    position: relative;
    padding: 1%;
	height:33px;
	margin: 0 0 0 auto;
  　border-radius: 50%;
	margin-right:2%;
  }
  .unshown {
    display: none;
  }
  #open {
    display: inline-block;
    width: 30px;
    height: 32px;
	  cursor: pointer;
	   transform:		scale(1.4);
  }
  #open span, #open span::before, #open span::after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: white;
    display: block;
    content: "";
    text-align:right;
  }
  #open span::before {
    bottom: -8px;
  }
  #open span::after {
    bottom: -16px;
  }
  #close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #132b88;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  .gfh-menu {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 270px;
    height: 100%;
    background: #132b88;
    transition: .3s ease-in-out;
    transform: translateX(-105%);
  }
  #input:checked ~ #close {
    display: block;
    opacity: .5;
  }
  #input:checked ~ .gfh-menu {
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  }
/*ハンバーガーメニュー*/
	
#top-sec {
	width:100%;
	margin:  0 auto;
}

.topimg {
	background-image:url('img/top1.jpg');
	background-repeat:  no-repeat;
	background-size: contain;
	width:100%;
	height:733px;
	
}

#test1-sec {
	width:100%;
	margin:  0 auto;
	margin-top:120px;
	border-top: solid 10px #2d4283;
}

.sec-test1-img {
	background-image:url('img/test1.jpg');
	background-repeat:  no-repeat;
	background-size: contain;
	width:100%;
	height:300px;
}
}


/*タブレット*/
@media screen and (min-width:768px) and ( max-width:1024px) {
	
	header {
	width:auto;
	background-color:#2d4283;
	padding-top:10px;
	padding-bottom:10px;
}

	nav {
		justify-content: center;
    align-items: center;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	margin:  0 auto;
	}

.logo {
	background-image:url('img/logo.png');
	background-repeat:  no-repeat;
	background-size: contain;
	width:360px;
	height:74px;
	margin-right:40px;
	margin-left:3%;
}

	/*ハンバーガーメニュー*/
#drawer {
    position: relative;
    padding: 1%;
	height:33px;
	margin: 0 0 0 auto;
  　border-radius: 50%;
	margin-right:2%;
  }
  .unshown {
    display: none;
  }
  #open {
    display: inline-block;
    width: 30px;
    height: 32px;
	  cursor: pointer;
	   transform:		scale(1.4);
  }
  #open span, #open span::before, #open span::after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: white;
    display: block;
    content: "";
    text-align:right;
  }
  #open span::before {
    bottom: -8px;
  }
  #open span::after {
    bottom: -16px;
  }
  #close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #132b88;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  .gfh-menu {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 270px;
    height: 100%;
    background: #132b88;
    transition: .3s ease-in-out;
    transform: translateX(-105%);
  }
  #input:checked ~ #close {
    display: block;
    opacity: .5;
  }
  #input:checked ~ .gfh-menu {
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  }
/*ハンバーガーメニュー*/

#top-sec {
	width:100%;
	margin:  0 auto;
}

.topimg {
	background-image:url('img/top1.jpg');
	background-repeat:  no-repeat;
	background-size: contain;
	width:100%;
	height:733px;
	
}

#test1-sec {
	width:100%;
	margin:  0 auto;
	margin-top:120px;
	border-top: solid 10px #2d4283;
}

.sec-test1-img {
	background-image:url('img/test.jpg');
	background-repeat:  no-repeat;
	background-size: contain;
	width:100%;
	height:300px;
}
}

/*PC*/
@media screen and (min-width:1025px) {

header {
	width:auto;
	background-color:#2d4283;
	padding-top:10px;
	padding-bottom:10px;
	margin:  0 auto;
}

nav {
justify-content: center;
    align-items: center;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	margin:  0 auto;
}

.logo {
	background-image:url('img/logo.png');
	background-repeat:  no-repeat;
	background-size: contain;
	width:360px;
	height:74px;
	margin-right:40px;
}

.gfh-menu {
	width:auto;
  text-align:center;
  height: 100%;
}

.gfh-menu ul {
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
     margin:  0 auto;
	  padding-left: 0;
}

.gfh-menu li a:hover {
	background-color:rgba(255,255,255,0.75);
}

.menu-li1 a {
	display:block;
  height: 100%;
	width:174px;
	color:white;
	border-right: solid 1px #fff;
}

.menu-li2 a {
	display:block;
  height: 100%;
	width:175px;
	color:white;
}

#top-sec {
	width:1100px;
	margin:  0 auto;
}

.topimg {
	background-image:url('img/top1.jpg');
	background-repeat:  no-repeat;
	background-size: contain;
	width:100%;
	height:733px;
	
}

#test1-sec {
	width:1100px;
	margin:  0 auto;
	margin-top:120px;
	border-top: solid 10px #2d4283;
}

.sec-test1-img {
	background-image:url('img/test.jpg');
	background-repeat:  no-repeat;
	background-size: contain;
	width:100%;
	height:300px;
}


}

行動規範の内容に同意します

回答2件

背景画像では対処が難しいので、img要素にしてはどうでしょうか。

css
1      .topimg {
2        /*background-image: url('img/top1.jpg');
3        background-repeat: no-repeat;
4        background-size: contain;*/
5        width: 100%;
6        /*height: 733px;*/
7
8      }

html
1<!--<div class="topimg">
2</div>-->
3<img src="img/top1.jpg" alt="" class="topimg">

もちろん、全てのブレイクポイントでCSSを変更する必要があります。

投稿2021/11/12 02:33

編集2021/11/12 02:34

Lhankor_Mhy

総合スコア36908

ベストアンサー

.topimgのbackground-sizeをcoverにしてみてはいかがでしょうか。

投稿2021/11/11 09:06

KAOsaka

総合スコア531

退会済みユーザー

2021/11/11 11:39

やってみました。すると隙間がいっさいなくなってしまった上に画像が画面からはみでてでかくなってしまいました。

KAOsaka

2021/11/11 14:03

隙間がなくなったようで良かったです。

退会済みユーザー

2021/11/12 07:17

高さをpadding-topで指定したらはみでることもなくなりました！ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ウェブサイトをスマホやタブレットで見るとPCで見た時より画像と画像の間の隙間が大きくなる

前提・実現したいこと

発生している問題・エラーメッセージ

試したこと

関連した質問