付箋ボックスのサイズをスマホ版と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 {
    padding: 0.5em 1em;
    margin: -1em 4em;
    color: #555555;
    background: #f7f7f7;/*背景色*/
}
.box3 p {
    margin: 0em; 
    padding: 0em;
}}