1
3列のレイアウトがありますが、何らかの理由で中間の列（スニペットのテキスト列）に何らかの理由でエッジからエッジに至るまで.middleの幅が70％に設定されています。フレックスアイテムの幅プロパティがメディアクエリで認識されない
Divsとpはブロックレベルの要素ですが、私はメディアクエリの指定後に100％幅のままである理由についてはあまりよく分かりませんが、コードの最後にあります。
p要素の両側に余裕を持たせたいと思います。
問題のクラスは、メディアクエリの最後のリストです。
body {
background-color: green;
}
html,
body {
height: 100%;
}
.container {
display: flex;
position: absolute;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
width: 70%;
margin: auto;
background-color: white;
border: 1px solid yellow;
}
.left {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: space-around;
order: 1;
//flex: 1 20%;
width: 25%;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
//flex: 2 20%;
width: 50%;
height: 100%;
}
.right {
display: flex;
position: relative;
flex-flow: row wrap;
align-content: flex-start;
justify-content: center;
order: 3;
width: 25%;
//flex: 1 50%;
}
div.list {
display: flex;
flex-flow: row wrap;
width: 70%;
justify-content: center;
line-height: 300%;
;
border: 1px solid pink;
}
.right .list {
// text-align: center;
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
#bigwrap {
height: 100%;
}
.container {
display: flex;
//position: absolute;
position: relative;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 12%;
}
.container img {
margin-bottom: 10%;
}
.container img:first-child {
margin-top: 5%;
}
.middle p:first-child {
margin-top: 8%;
}
.left,
.middle,
.right {
// border-right: 1px solid blue;
}
.left img {
max-width: 100%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
flex: 2 20%;
}
.right .list {
height: auto;
}
.list ul {
list-style: none;
padding: 0;
}
.list a {
text-decoration: none;
color: inherit;
}
.headbox h3 {
color: orange;
}
.right .headbox {
border: 1px solid orange;
width: 70%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
@media all and(max-width: 800px) {
#nav {
justify-content: space-around;
}
}
@media all and (max-width: 500px) {
#nav {
flex-direction: column;
/*updated*/
margin-bottom: 7%;
}
#nav ul {
padding-left: 0;
/*added*/
}
#nav li {
flex: 1 1 100%;
/*updated*/
padding: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav li a {
text-align: center;
padding: 5px;
margin: 5px;
}
.box img {
max-width: 100%;
margin-bottom: 9%;
}
#bigwrap {
width: 100%;
border: 1px solid gray;
}
.container {
flex-flow: row wrap;
height: 100%;
width: 100%;
}
.left,
.right {
flex: 1 100%;
}
.middle {
width: 70%;
}
}<div id="bigwrap">
<div class="container">
<div class="left">
<img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
<img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
</div>
<div class="middle">
<div class="box">
<p>
Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
</p>
</div>
<div class="box">
<p>
Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
</p>
</div>
<div class="box">
<p>
Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
</p>
</div>
</div>
<div class="right">
<div class="headbox">
<h3>Visit Us</h3>
</div>
<div class="list">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Hours</a>
</li>
<li><a href="#">Plan</a>
</li>
<li><a href="#">Directions</a>
</li>
</ul>
</div>
</div>
</div>
</div>