付箋ボックスのサイズをスマホ版とPC版と分けて設定する
付箋ボックスを設定する際に、PC版に合わせるとスマホ版が狭くなってしまいます。 下記を挿入したら実際のHTML記事で挿入しましょう。 box8 sample <div class="box8"> <p>ここに文章</p> </div> box3 sample <div class="box3"> <p>ここに文章</p> </div> CSSで以下のように設定してみましょう。 /*スマホ版 付箋 css*/@media only screen and (min-width:320px) and (max-width:479px){ .box8 { padding: 0.5em 1em; margin: -1em 0.8em; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; } .box8 p { margin: 0; padding: 0; } /*無地ボックス css*/ .box3 { padding: 0.5em 1em; margin: -1em 0.8em; color: #555555; background: #f7f7f7;/*背景色*/ } .box3 p { margin: 0em; padding: 0em; }} /*PC版 付箋 css*/ @media only screen and (min-width: 1200px) { .box8 { padding: 0.5em 1em; margin: -1em 4em; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; } .box8 p { margin: 0; padding: 0; } /*無地ボックス css*/ .box3 {