固定ページを左右に分けて、レスポンシブに

  • 解決済 kitakarasu

    (@kitakarasu)


    8年、 9ヶ月前

    WordPressのサイドバーを使わずに、固定ページを左右に分けているページがあります。
    「固定ページの編集」で「テキスト」タブで

    <div id=”main”>
    本文をここに入れる
    </div>
    <div id=”sub”>
    注釈をここにいれる
    </duv>

    として、
    「BizVektor CSSカスタマイズ」で、

    #main{width: 70%; height: auto; margin: 0px; float: left;}
    #sub{width: 30%; height: auto; margin: 0px; float: right;}

    として、左右に分けることができました。

    ＜質問＞
    これをレスポンシブにする設定を教えてください。

    携帯端末の小さな画面では、#mainと#subを縦に並べるようにしたいです。
    お願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター Okamoto Hidetaka

    (@hideokamoto)

    8年、 9ヶ月前

    @media screen and (max-width: 640px) {
  #main,#sub{
    width: 100%;
    float: none;
  }
}

    でいかがでしょう？
    CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き : http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

    トピック投稿者 kitakarasu

    (@kitakarasu)

    8年、 9ヶ月前

    Okamoto Hidetakaさん

    教えて頂いたコードをそのまま入れたら，携帯の小さな画面で上下に並びました。
    ありがとうございました。

    ＣＳＳはこんな風に作っていくんですね。とても奥が深くて，習得したらとても便利なもので，わかるところから取り組んでいこうと思いました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「固定ページを左右に分けて、レスポンシブに」には新たに返信することはできません。