レスポンシブが上手くいきません。。
解決したいこと
CSSの勉強をしています。
レスポンシブが思ったようになりません。
795px以下になるとスマホの画面になるようにしています。
実際に795px以下にするとスマホ専用のCSSは反映されます。
ただし、widthの設定がおかしいのか、画面が横にスライドできてしまいます。
デベロッパーを使い確認しても余白に跳び出ているのはありません。
横にスライドしなくてもそのwidthにあったサイズに調整したいのですが、どのようにしたら良いでしょうか。
何卒宜しくお願い致します。
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="expires" content="604800">
<meta name="format-detection" content="email=no,telephone=no,address=no">
<title>【03】| 【1-Puzzle】</title>
<meta name="description" content="【03】| 【1-Puzzle】のdescriptionです">
<link rel="icon" href="assets/images/common/favicon.ico">
<link rel="stylesheet" href="assets/stylesheets/app.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header-image">
<img class="pc" src="logo-hdr.png" alt="パソコン用">
<img class="sp" src="logo-hdr.png" alt="スマホ用">
</div>
</header>
<main class="main">
<div class="aside">
<div class="aside-title">
<h3>大見出し</h3>
</div>
<div class="aside-content">
<div class="box-top">
<h4>大見出しテキスト<em class="tiny">大見出しテキスト</em>大見出しテキスト</h4>
<h4>大見出しテキスト</h4>
<h4>大見出しテキスト大見出しテキスト大見出しテキスト</h4>
</div>
<div class="box-bottom">
<h4>大見出しテキスト大見出しテキスト大見出しテキスト</h4>
<h4>大見出しテキスト</h4>
<h4>大見出しテキスト<em class="tiny">大見出しテキスト</em>大見出しテキスト</h4>
</div>
</div>
</div>
<div class="main-content">
<div class="main-title">
<h3>中見出し</h3>
</div>
<div class="box-link">
<div class="link">
<a href="index.html"><p>link_1</p></a>
</div>
<div class="link">
<a href="index.html"><p>link_2</p></a>
</div>
<div class="link-margin">
<a href="index.html"><p>link_3</p></a>
</div>
</div>
<div class="box-text">
<div class="date">
<p>2021/01/01</p>
</div>
<div class="text">
<p>datalistテキストdatalistテキストdatalistテキスト</p>
<p>datalistテキストdatalistテキスト</p>
</div>
</div>
<div class="box-text">
<div class="date">
<p>2021/02/22</p>
</div>
<div class="text">
<p>datalistテキストdatalistテキスト</p>
<p>datalistテキストdatalistテキストdatalistテキストdatalistテキスト</p>
</div>
</div>
<div class="box-text">
<div class="date">
<p>2021/12/09</p>
</div>
<div class="text">
<p>datalistテキストdatalistテキストdatalistテキスト</p>
<p>datalistテキストdatalistテキストdatalistテキストdatalistテキスト</p>
<p>datalistテキストdatalistテキスト</p>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-text">
<h4>小見出し</h4>
</div>
<span class="footer-puzzle">
<p><em class="small">©</em>Puzzle_03</p>
</span>
</footer>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 796px) { /* pc用スタイル */
.sp {
width: 100px;
display: none !important;
margin: auto;
text-align: center;
}
.header {
width: 100%;
background-color: #00002b;
padding: 20px 40px;
}
.main {
width: 100%;
display: flex;
}
.aside {
width: 420px;
padding: 20px;
background-color: #77F9C3;
}
.main-content {
width: 100%;
padding: 20px;
background-color: #A52A2A;
display: inline-block;
}
.aside-title {
font-size: 25px;
color: #f00;
}
.box-top {
font-size: 18px;
margin-bottom: 10px;
}
.box-bottom {
font-size: 18px;
}
.text-connect {
display: flex;
}
.tiny {
font-size: 12px;
font-weight: 100;
}
.main-title {
font-size: 20px;
color: #00f;
}
.box-link {
margin: 20px 0 50px 0;
display: flex;
}
.link {
font-size: 18px;
margin-right: 20px;
width: auto;
padding: 5px 30px;
border:1px solid #d98d30;
background-color: #333;
color: #fff;
}
.link-margin {
font-size: 18px;
width: auto;
padding: 5px 30px;
border:1px solid #d98d30;
background-color: #333;
color: #fff;
}
.box-text {
margin: 0 0 10px 0;
}
.date {
font-family: "Arial";
src: local("Roboto Light");
}
.text {
font-size: 18px;
color: #999;
}
.footer {
width: 100%;
background-color: #DAA520;
padding: 20px 40px;
display: flex;
}
.footer-text {
color: #0f0;
}
.small {
font-size: 10px;
font-weight: 300;
vertical-align: middle;
}
.footer-puzzle {
margin-left: auto;
font-size: 18px;
}
}
@media only screen and (max-width: 795px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
@media screen and (max-width: 795px) { /* sp用スタイル */
.sp {
width: 50px;
}
.header {
background-color: #e91e63;
padding: 20px 40px;
}
.main {
width: 100%;
}
.aside {
padding: 20px;
background-color: #0093b7;
}
.main-content {
width: 100%;
padding: 20px;
background-color: #dbd400;
display: inline-block;
}
.aside-title {
font-size: 20px;
color: #f00;
}
.aside-content {
margin-top: 20px;
}
.box-top {
font-size: 17px;
margin-bottom: 10px;
}
.box-bottom {
font-size: 17px;
}
.text-connect {
display: flex;
}
.tiny {
font-size: 30px;
}
.main-title {
font-size: 10px;
color: #00f;
}
.box-link {
margin: 20px 0 50px 0;
display: flex;
}
.link {
text-align: center;
font-size: 18px;
margin-right: 20px;
width: 30%;
padding: 5px 30px;
border:1px solid #d98d30;
background-color: #333;
color: #fff;
}
.link-margin {
text-align: center;
font-size: 18px;
width: 30%;
padding: 5px 30px;
border:1px solid #d98d30;
background-color: #333;
color: #fff;
}
.box-text {
display: flex;
margin: 0 0 10px 0;
align-items: center;
}
.date {
margin-right: 20px;
font-family: "Arial";
src: local("Roboto Light");
}
.text {
font-size: 13px;
color: #999;
}
.footer {
background-color: #170e38;
padding: 20px 40px;
display: flex;
}
.footer-text {
color: #0f0;
}
.small {
font-size: 10px;
font-weight: 300;
vertical-align: middle;
}
.footer-puzzle {
color: #fff;
margin-left: auto;
font-size: 12px;
}
}
自分で試したこと
CSSのclassを一つずつ削除しておかしい所が無いか調べましたが良く分かりませんでした。
分かりにくいかもしれませんが何卒よろしくお願い致します。
0