Q&A
現在Webページ制作にてレスポンシブデザインを使おうとしているのですが、
画像の配置が変更出来ない状況です。
サイト幅861px以上の時は左端から150px離れている部分に配置していますが、
サイト幅860px以下の時には画像を左寄せにしたいと考えています。
しかしメディアクエリを適用しても画像が出来ません。
行なったことは
viewpoint構文の配置変更
メディアクエリにてimportantの使用
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>サイト制作</title> 6 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″> 7 <link rel="stylesheet" type="text/css" href="rayout.css"> 8 9</head> 10<body> 11<div id="sitebox"><!--全体のサイズ指定--> 12 13<!--ヘッダーの作成--> 14<header> 15 <div class="hedder-icon"> 16 <img src="images/logo.png"> 17 </div> 18 19 <div class="hedder-list"> 20 <ul> 21 <li>1</li> 22 <li>2</li> 23 <li>3</li> 24 </ul> 25 </div> 26</header> 27</div> 28<!--ヘッダーの作成-->
css
1#sitebox{ 2 background-color:#white; 3 width: 1000px; 4} 5/*ヘッダーの作成*/ 6.hedder-icon{ 7 padding-left: 150px; 8 padding-bottom: 10px; 9} 10/*↓メディアクエリ*/ 11@media screen (max-width:860px){ 12 .hedder-icon{ 13 padding-bottom: 10px; 14 } 15} 16 17.hedder-list ul { 18 background-color:#red; 19 color: white; 20 display: flex; 21 justify-content: center; 22 padding-left: 20px; 23} 24li{ 25 padding: 0 80px; 26 border-right:1px solid white; 27} 28li:first-child{ 29 border-left:1px solid white; 30} 31/*ヘッダーの作成*/
回答1件
0
ベストアンサー
and が抜けている。
padding-left: 150px; を上書きする padding-left: 0; が必要。
css
1/*↓メディアクエリ*/ 2@media screen and (max-width:860px){ 3 .hedder-icon{ 4 padding-left: 0; 5 padding-bottom: 10px; 6 } 7}
投稿2021/09/23 15:03
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/24 01:38
2021/09/24 01:48