・箇所
レスポンシブコーディング 全体
・事象内容
メディアクエリ 750px で設定している。
img を width:90% ; margin : 0 5%; にしたいができない。
google のプレビューでは、デバイスの幅で 100% になる。
(360や412)
img に100%をつけると 360px になってしまう
・試したこと
body や wrapper、をつくって、これに100%をかけるが、幅が出せない。
marginがうまく取れないのでレイアウトが崩れる
margin: 0; padding: 0; list-style-type: none; font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 12px; line-height: 2; } @media screen and (max-width:750px) { .sp{ width: 100%; } body{ width: 100%; } #wrapper{ width: 100%; } .pc_none{ display: none; } .sp_campaign_title{ max-width: 90% ; margin: 80px 10%; } .sp_step1{ width: 100%; margin: 0 5% 60px; } sp_top_img{ width: 100%; margin-bottom: 80px; } .sp_campaign_box{ width: 100%; height: 300px; border: 1px solid #ccc; overflow-y: scroll; margin: 50px ; } } /************************************************************/ @media screen and (min-width:751px){ .sp_none{ display: none; } /*751px以上_pc*/ .spring_creation{ width: 1350px; height: 677px; margin: 0 auto; } .join_title{ width: 758px; height: 28px; margin: 85px auto 50px; } .step1{ width: 754px; height: 270px; margin:0 auto 50px; } .arrow{ width: 150px; height: 37px; margin: 0 auto 50px; } .theme_text{ width: 693px; height: 49px; margin: 40px auto; } .theme1{ width: 963px; height: 325px; background-image: url("../img/flame1.jpg"); margin: 0 auto 35px; overflow: hidden; clear: both; } .theme2{ width: 963px; height: 337px; background-image: url("../img/flame2.jpg"); margin: 0 auto 40px; overflow: hidden; clear: both; } .theme3{ width: 963px; height: 325px; background-image: url("../img/flame3.jpg"); margin: 0 auto 48px; overflow: hidden; clear: both; } .step3{ width: 756px; height: 458px; margin: 28px auto 130px; } .Present_title{ width: 755px; height: 27px; margin: 0 auto 50px; } .prize{ width: 756px; height: 423px; margin: 0 auto 40px; } .campaign_title{ width: 753px; height: 27px; margin: 0 auto 40px; } .campaign_box{ width: 950px; height: 375px; margin: 0 auto; overflow-y: scroll; border: solid 1px #ccc; padding: 20px } .toukou{ color: #f1717e; } .campaign_kiyaku{ font-weight: bold; font-size: 18px; } .campaign_kiyaku_h5{ font-weight: bold; font-size: 14px; text-decoration: underline; } .indent-1 { padding-left:1em; text-indent:-1em; } .pink{ color: #f1717e; } .spring_footer{ width: 344px; height: 26px; margin: 60px auto; } .f_left1{ float: left; margin-top: 45px; margin-left: 430px; } .f_left2{ float: left; margin-top: 45px; margin-left: 40px; } .f_left3{ float: left; margin-top: 50px; margin-left: 430px; } .f_left4{ float: left; margin-top: 50px; margin-left: 40px; } }
あなたの回答
tips
プレビュー