Q&A
で、何が問題ですか？
あと、コードは
```
コード
```
のようにして記入してください。
メディアクエリを使って1000px以下になったら要素の横幅を100%に変更したいです。
BOX1：赤
BOX2：黄
通常時
横幅：600px
高さ：200ｐｘ；
レスポンシブ時
横幅：100%
@charset "UTF-8";
/* reset */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
margin: 0;
padding: 0;
border: none;
font-style: normal;
font-weight: normal;
font-size: 100%;
text-align: left;
list-style-type: none;
border-collapse: collapse;
}
textarea { font-size: 100%; vertical-align:middle;}
img { border-style: none; display: block; }
hr { display: none; }
em{font-style: normal}
input{line-height:auto;vertical-align:middle;}
strong.more{color:#c30}
a{text-decoration: none;}
html {
}
body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* 上の部分は気にせずここから書く */
#wrapper {
padding: inherit;
display: flex;
}
#box1{
width: 600px;
height: 200px;
background-color: red;
margin-left: auto;
margin-right: auto;
}
#box2{
width: 600px;
height: 200px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1000px){
div#wrapper{width: 100%;}
}
htmlやcssのコードはコードブロックを使って質問文を修正してください。コードを```と```で囲みます。
右側のプレビューもしっかり確認しましょう。
また、このままでは完全に丸投げの質問なので自分で書いてみたコードを提示し、期待している状態と現状の状態がどのように違うのかを説明しましょう。
ご質問をするにあたり言葉足らずになってしまい、丸投げの形になって申し訳ございません。
質問する際には言葉をまとめて投稿するように気を付けます。
回答1件
0
ベストアンサー
要素の横幅を100%に変更したい
子要素(#box1, #box2)の横幅を 100%にしたいということですよね。
css
1@media (max-width: 1000px){ 2div#wrapper{width: 100%;} 3 4}
やっているのは親要素(#wrapper)の幅を100%にしています。無意味です。
親要素にdisplay: block;を設定してflexを解除して、
子要素に幅100%を設定しましょう。
css
1@media (max-width: 1000px){ 2div#wrapper{ 3 display: block; 4 } 5 #box1, #box2 { 6 width: 100%; 7 } 8}
投稿2021/06/09 00:11
編集2021/06/09 00:14
総合スコア33715
あなたの回答
tips
プレビュー
