実現したいこと
幅が固定されてしまうのを解決したい
発生している問題・分からないこと
このように幅が固定されてしまっているのを解決したいと思っています！
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <link rel="stylesheet" href="style.css">7 <!-- <link rel="icon" href="images/favicon.ico" type="image/x-icon"> -->8 <title>マチナカレンタカーtailand</title>9</head>10<body>11 <header id="header_container">12 <div class="header_content">13 <div class="header_wrapper">14 <img src="images/logo.png" alt="ロゴ画像">15 <p class="header_item">多謝租车</p>16 </div>17 <div class="">18 <img src="images/line_logo.png" alt="LINE画像">19 </div>20 </div>21 </header>22 <section id="top">23 <div class="top_content">24 <div class="top_container">25 <img src="images/logo.png" alt="ロゴ画像" class="top_logo">26 <div class="top_container_box">27 <p>提供中文服务的租车</p>28 <div class="top_container_box_title">29 <p class="top_renta">多謝租车</p>30 <p class="top_renta_sub">Rent a car</p>31 </div>32 <div class="top_wrapper">33 <p>请通过官方LINE进行询问</p>34 <p class="line_add">预订</p>35 </div>36 </div>37 </div>38 <div class="">39 <img src="images/top_img.png" alt="" class="top_img">40 </div>41 </div>42 </section>43 <section id="reserve">44 <div class="reserve_container">45 <img src="images/reserve_img.png" alt="" class="reserve_img">46 <div class="reserve_content">47 <p class="reserve_title_sub">在网上预订</p>48 <h2 class="reserve_title">Reservation</h2>49 </div>50 <div class="reserve_content_box">51 <h4 class="reserve_content_box_title">预订方式</h4>52 <p class="reserve_content_box_title_sub">请通过官方 LINE 预订，按照格式填写您的出发日期、<br> 基地、使用时间、车型等信息。</p>53 </div>54 <div class="reserve_content_order">55 <div class="reserve_content_order_container">56 <div class="reserve_content_order_img_box">57 <img src="images/line_logo.png" alt="" class="reserve_content_order_img">58 </div>59 <p class="reserve_content_order_img_text">注册官方LINE!</p>60 </div>61 <div class="arrow">→</div>62 <div class="reserve_content_order_container">63 <div class="reserve_content_order_img_box">64 <img src="images/line_logo.png" alt="" class="reserve_content_order_img">65 </div>66 <p class="reserve_content_order_img_text">确认预订信息 当天的配车手续</p>67 </div>68 <div class="arrow">→</div>69 <div class="reserve_content_order_container">70 <div class="reserve_content_order_img_box">71 <img src="images/line_logo.png" alt="" class="reserve_content_order_img">72 </div>73 <p class="reserve_content_order_img_text">确认车辆后出发!</p>74 </div>75 </div>76 </div>77 </section>78</body>79
css
1body {2 margin: 0;3 background-color: #F7F8FD;4}5 6p {7 margin: 0;8}9 10#header_container {11 background-color: #B1B1B1;12 height: 100%;13}14 15.header_content {16 display: flex;17 justify-content: space-between;18 align-items: center;19 padding: 22px 62px;20}21 22.header_wrapper {23 display: grid;24 grid-template-columns: 80px 1fr;25}26 27.header_item {28 padding-top: 14px;29 font-weight: bold;30 font-size: 32px;31}32 33/* top */34 35.top_content {36 display: grid;37 grid-template-columns: 1fr 1fr;38 place-items: center;39 margin: 82px;40}41 42@media screen and (max-width:768px) {43 .top_content {44 grid-template-columns: 1fr;45 }46}47 48img.top_logo {49 width: 100px;50 height: 100px;51}52 53.top_container {54 display: grid;55 grid-template-columns: 130px 1fr;56 align-items: center;57}58 59@media screen and (max-width:768px) {60 .top_container {61 align-items: normal;62 }63}64 65.top_container_box {66 padding-top: 42px;67}68 69@media screen and (max-width:768px) {70 .top_container_box {71 padding: 0;72 }73}74 75.top_container_box_title {76 display: grid;77 grid-template-columns: 1fr 1fr;78}79 80@media screen and (max-width:768px) {81 .top_container_box_title {82 grid-template-columns: 1fr;83 }84}85 86p.top_renta_sub {87 padding-top: 18px;88}89 90.top_renta {91 font-size: 34px;92 font-weight: bold;93}94 95.top_wrapper {96 display: grid;97 grid-template-columns: 1fr 1fr;98 padding-top: 32px;99 align-items: center;100}101 102@media screen and (max-width:768px) {103 .top_wrapper {104 grid-template-columns: 1fr;105 }106}107 108.line_add {109 background-color: #474545;110 text-align: center;111 border-radius: 8px;112 padding: 14px 54px;113 margin-left: 54px;114 color: #fff;115 font-weight: bold;116}117 118.top_img {119 width: 330px;120 height: 250px;121 object-fit: contain;122}123 124/* reserve */125 126.reserve_container {127 position: relative;128}129 130img.reserve_img {131 width: 100%;132}133 134@media screen and (max-width:768px) {135 img.reserve_img {136 display: none;137 }138}139 140.reserve_content {141 position: absolute;142 top: 40px;143 left: 120px;144}145 146@media screen and (max-width:768px) {147 .reserve_content {148 position: static; /* 絶対配置を解除 */149 padding: 20px; /* パディングを調整 */150 }151}152 153.reserve_title {154 margin: 0;155 font-size: 48px;156}157 158.reserve_content_box {159 position: absolute;160 top: 140px;161 right: 0;162 bottom: 0;163 left: 0;164 margin: auto;165}166 167@media screen and (max-width:768px) {168 .reserve_content_box {169 position: static; /* 絶対配置を解除 */170 padding: 20px; /* パディングを調整 */171 }172}173 174.reserve_content_box_title {175 text-align: center;176 font-size: 48px;177 font-weight: bold;178 color: #fcf6f6;179 border-bottom: 3px solid;180 width: 400px;181 margin: 0 auto;182 padding-bottom: 10px;183 margin-bottom: 62px;184}185 186@media screen and (max-width:768px) {187 .reserve_content_box_title {188 color: #333;189 }190}191 192.reserve_content_box_title_sub {193 text-align: center;194 font-size: 22px;195 color: #fcf6f6;196 margin-bottom: 62px;197}198 199@media screen and (max-width:768px) {200 .reserve_content_box_title_sub {201 color: #333;202 }203}204 205.reserve_content_order {206 position: absolute;207 bottom: 100px;208 display: grid;209 grid-template-columns: 300px 60px 300px 60px 300px;210 place-items: center;211 left: 50%; /* 親要素の中央に移動 */212 transform: translateX(-50%); /* 要素自体の幅の半分を左に移動 */213}214 215@media screen and (max-width:768px) {216 .reserve_content_order {217 position: static; /* 絶対配置を解除 */218 transform: none; /* 変換を解除 */219 grid-template-columns: 1fr; /* グリッドの列を1列に変更 */220 gap: 20px; /* グリッドの間隔を調整 */221 }222}223 224.reserve_content_order_container {225 width: 100%;226}227 228@media screen and (max-width:768px) {229 .reserve_content_order_container {230 width: auto;231 }232}233 234.reserve_content_order_img_box {235 background-color: #BEE2E9;236 display: flex;237 justify-content: center;238 border-radius: 12px 12px 0 0;239}240 241img.reserve_content_order_img {242 text-align: center;243}244 245.reserve_content_order_img_text {246 background-color: #fff;247 padding: 24px 42px;248 border-radius: 0 0 12px 12px;249 text-align: center;250}251 252.arrow {253 font-size: 32px;254 color: #fff;255 font-weight: bold;256}257 258@media screen and (max-width:768px) {259 .arrow {260 display: none;261 }262}263 264
試したこと・調べたこと
上記の詳細・結果
sectionで分けており、どこが原因か削除しながら調べてりしました！
補足
文字数の関係で少しsectionを削除しております！
現状の状態でも幅が固定されております。
0 コメント