前提・実現したいこと
HTMLとCSSを用いてポートフォリオを作成しているのですが、PC用のCSSが書き終わり、レスポンシブ対応をしようとしたのですが、media queryでmarginをすべて0にしたくてもできません。
長くなるので問題が起きていそうな箇所のコードのみ記載します。
HTML該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="normalize.css" /> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="media.css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous" />``` ### 該当のCSSソースコード .hobbys { margin: 200px; padding: 150px 0px; text-align: center; h1 { margin: 0px; } p { margin: 0px 0px 20px 0px; }.hobby-collom {
flex-wrap: wrap;
display: flex;
.hobby { margin: 10px; width: 30%; position: relative; h2 { position: absolute; top: 0px; left: 50px; margin: 0px; color: gray; } img { width: 100%; height: 200px; } p { font-size: 13px; } }
}
}
Mediaqueryのソースコード
@media (max-width: 1024px) {
- {
margin: 0;
padding: 0;
}
}
プログラミング及びteratail初心者なので足りない情報がありましたら教えて下さい。
回答1件
あなたの回答
tips
プレビュー