PC画像横並び「スマホ表示では縦」にするCSS

2018年10月11日2018年10月30日

私

こちらでは「div要素」にて、PCでは横並び・スマホ表示では縦並びにするCSSを紹介

HTML

<div class="topbana" style="float: left;">
画像タグ
</div>
<div class="topbana" style="float:right;">
画像タグ
</div>

この状態ですと、スマホ表示でも横並びになる可能性があります。
そこで以下のＣＳＳを追加しておきます。

スマホ表示で横並びにするcss

HTML

/*スマホ時横並び */
@media screen and (max-width:480px){
  .topbana {
    width: 100%;
    float: none;
  }
}

参考になりましたら幸いです。