WEB制作初心者です。
レスポンシブに対応させたいのですが、横にスクロールしても
ヘッダーのナビゲーションとロゴが縦並びになりません。
わかる方おられましたら、ご教示いただけますと助かります。
</head> <body> <header class="page-header"> <h1>LOGO</h1> <nav> <ul class="main-nav"> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header><!----css----> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="style.css">
</body> </html><div class="top-wrapper"> </div> <h2>Feature</h2> <div class="about wrapper"> <article> <h3>What is “Coding Basics”?</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu. </p> <a class="button" href="#">Read More</a> </article> <aside> <img src="images/sample@2x.png" alt="パソコンを見る女性"> </aside> </div> <footer> <div class="logo"><small>LOGO</small></div> <p>© 2020 LOGO All rights reserved.</p> </footer>
@charset "UTF-8";
/* 共通部分
--------------------*/
html {
font-size: 100%;
;
}
body {
font-family: Arial;
line-height: 1.7;
min-width: 100%;
color: #432;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
/* ボタン */
.button {
color: #fff;
background: #EFA358 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border-radius: 10px;
padding: 15px 56px;
opacity: 1;
}
/* header
----------------------*/
header {
background: #EFA358;
height: 80px;
width: 100%;
min-width: 1300px;
margin: auto;
}
h1 {
color: #fff;
font-size: 28px;
margin-left: 0px;
}
.main-nav {
display: flex;
font-size: 20px;
list-style: none;
}
.main-nav li {
margin-left: 16px;
}
.main-nav a {
color: #fff;
}
.page-header {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}
/* home
----------------------/
/ 大きな画像 */
.top-wrapper {
background: url("images/fv@2x.png");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
}
h2 {
text-align: center;
font-size: 32px;
margin-bottom: 30px;
padding: 20px;
}
/* about
---------------------*/
.about {
display: flex;
justify-content: space-around;
margin-bottom: 50px;
}
/*記事部分 */
article {
text-align: left;
width: 45%;
order: 2;
}
/*小さな画像 */
aside {
width: 480px;
height: 329px;
order: 1;
}
h3 {
font-size: 32px;
}
article p {
font-size: 16px;
letter-spacing: 0px;
text-align: left;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 40px;
width: 394px;
height: 161px;
}
/フッター
----------------------/
footer {
background: #EFA358;
text-align: center;
margin-top: 100px;
padding: 26px 0;
height: 100px;
}
.logo {
color: #fff;
font-size: 24px;
}
footer p {
color: #fff;
font-size: 12px;
}
/* モバイル版
-------------------*/
@media (max-width:600px) {
padding-right: 15px;
padding-left: 15px;
/* header */
.page-header {
flex-direction: column;
align-items: center;
}
.main-nav {
font-size: 1rem;
margin-top: 10px;
}
.main-nav li {
margin: 0 20px;
}
}
回答1件
あなたの回答
tips
プレビュー