Q&A
コードはヘルプ等を参考に各コードブロックで提示してください。
画面のサイズを小さくしたときに.top-contentのpadding-leftがなくなるようにしたいです
<!DOCTYPE html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="img/punimaru.jpg" > <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <title>airbnbmosya</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <nobr> <i class="fab fa-airbnb fa-2x ml-4 my-2"></i> <form method="get" action="http://www.google.co.jp/search" target="_blank"> <input type="text" name="q" size="31" maxlength="255" value=""> <input type="submit" name="btng" value="検索"> <input type="hidden" name="hl" value="ja"> <input type="hidden" name="sitesearch" value="web-officer.com"> </form> </nobr> </div> <div class="alert alert-primary alert-dismissible"> <i class="fas fa-comment"></i> <a>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</a> <button type="button" class="close" data-dismiss="alert"> <span>×</span> </button> </div> <div class="top-wrapper"> <div class="top-content"> <h1>旅を贈ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <button type="button" class="btn btn-light btn-lg"> <a class="text-secondary">ギフトカードを登録</a> </button> </div> </div>.fa-airbnb{
color: red;
}
.alert a{
font-size: 14px
}
.top-wrapper{
background-image: url(img/tabi.jpg);
height: 100%;
width: 100%;
background-size: cover;
}
.top-wrapper h1{
color: white;
padding-top: 180px;
font-weight: bold;
font-size: 70px;
}
.top-wrapper p{
color: white;
padding-top: 20px;
font-size: 20px;
}
.top-wrapper a{
padding-top: 30px;
}
.top-content {
padding-left: 140px;
}
回答1件
0
ベストアンサー
レスポンシブはメディアクエリで設定します。
以下のコードを追加ではいかがでしょうか。
CSS
1@media all and (max-width: 767px) { 2 .top-content { 3 padding-left: 0; 4 } 5}
ブレイクポイントは、任意の値に書きかえてください。
投稿2019/04/21 15:24
総合スコア281
あなたの回答
tips
プレビュー
