### 前提
codestepの初心者用課題を練習しています。
スマホ版レスポンシブがメイン画像が左に寄ってしまいうまくいきません。
左寄りを防ぐにはどうすればいいでしょうか？
試したこと
.wrapをmax-widthにしました。
index.html
<!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"> <link rel="stylesheet" href="style6.css"> <title>Document</title> </head> <body> <header> <div class="wrap"> <div class="header-flex"> <div class="logo"><img src="img/img2/logo.png" alt=""></div> <div class="menu"> <ul class="header-menu-list"> <li><a href="#"></a>About</li> <li>Works</li> <li>News</li> <li>News</li> <li>a</li> </ul> </div> </div> </div> </header> <div class="main-img"></div> <div class="about-cont"> <div class="wrap"> <h2 class="works">About</h2> <p>Xxxxx Ashley</p> <p>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> <div class="work-cont"> <div class="wrap"> <h2 class="works">Works</h2> <div class="items"> <div class="item"><img src="img/img2/yama.jpg" alt=""></div> <div class="item"><img src="img/img2/yama.jpg" alt=""></div> <div class="item"><img src="img/img2/yama.jpg" alt=""></div> <div class="item"><img src="img/img2/yama.jpg" alt=""></div> <div class="item"><img src="img/img2/yama.jpg" alt=""></div> <div class="item"><img src="img/img2/yama.jpg" alt=""></div> </div> </div> </div> <div class="news-cont"> <div class="wrap"> <h2 class="works">News</h2> <ul> <li class="news-item"> <div class="item-time">2020.XX.XX</div> <div class="item-text">デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</div> </li> <li class="news-item"> <div class="item-time">2020.XX.XX</div> <div class="item-text">ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</div> </li> <li class="news-item"> <div class="item-time">2019.XX.XX</div> <div class="item-text">【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</div> </li> <li class="news-item"> <div class="item-time">2019.XX.XX</div> <div class="item-text">デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</div> </li> <li class="news-item"> <div class="item-time">2019.XX.XX</div> <div class="item-text">【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</div> </li> </ul> </div> </div> <div class="contact-cont"> <div class="wrap"> <h2 class="works">Contact</h2> <div class="name-cont"> <p class="name">NAME</p> <input type="text" class="input"> </div> <div class="name-cont"> <p class="name">E-mail</p> <input type="text" class="input"> </div> <div class="name-cont name-cont2"> <p class="name name2">MESSAGE</p> <textarea name="" class="input2"></textarea> </div> <div class="submit-flex"> <input type="submit" class="submit"> </div> </div> </div> </body> </html>
style6.css
body{ margin:0; } li{ list-style: none; } .header-flex{ display: flex; justify-content: space-between; padding: 100px 0; align-items: center; } .header-menu-list{ display: flex; list-style: none; gap: 30px; font-size:14.5px; } .wrap{ max-width: 960px; margin: 0 auto; } .main-img{ background-image:url(img/img2/03619.png); height: 500px; background-size: cover; margin-bottom: 5rem; } .about-cont{ margin-bottom: 100px; } h2{ text-align: center; } p{ font-size: 14.5px; } .items{ display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; } .work-cont{ margin-bottom:130px; } .works{ margin-bottom:65px; } .news-cont{ margin-bottom: 130px; } .news-item{ display: flex; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 0.5rem; } .item-time{ width: 20%; font-size: 14px; } /* ul{ border-bottom: 0.15rem solid #ccc; border-top: 0.15rem solid #ccc; } */ .name-cont{ display: flex; align-items: flex-start; margin-bottom: 0.9rem; } ul{ padding: 0; } .input{ padding: 0.5rem; width: 80%; border: 0; } .input2{ width: 80%; border: 0; margin-left: -3px; } .name{ width: 20%; margin: 0; } .name2{ width: 20%; margin: 0; } input,textarea { /* background-color: yellow; */ outline: 0.1rem #ccc solid; -webkit-appearance: none; } textarea{ height: 130px; } .contact-cont{ margin-bottom: 65px; } .name-cont2{ margin-bottom: 65px; } .submit-flex{ display: flex; justify-content: center; } .submit{ color: #fff; padding: 1rem 5rem; background-color: #000; transition: all 3s; } @media (max-width: 600px) { .header-flex { flex-direction: column; } p{ color: aqua; } } @media (max-width: 960px) { .wrap { width:800px; } p{ color: aqua; } } @media (max-width: 860px) { .wrap { width:650px; } .item-text{ font-size:0.9rem; } } @media (max-width: 770px) { li{ flex-direction: column; padding: 1rem; } .items{ flex-direction: column; align-items: center; } .header-flex{ padding:50px 0; } } @media (max-width: 767px) { h2{ font-size: 1.2rem; } p,li{ font-size: 0.8rem; } .name{ flex:100px 0 0; } } @media (max-width: 700px) { .wrap{ width: 500px; } } @media (max-width: 500px) { .about-cont{ padding:0 1rem; } } .last { background-image: url(img/img2/yama.jpg); height: 500px; background-size: cover; display: grid; place-items: center; } .btn1{ background-color:#fff; color: deepskyblue; padding: 1rem 2rem; border-radius: 40px; font-size: 32px; } a{ text-decoration: none; } .submit:hover{ background-color: #fff; color: #000; }
0 コメント