サポート » 使い方全般 » 固定ページを左右に分けて、レスポンシブに

  • 解決済 kitakarasu

    (@kitakarasu)


    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)

    @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)

    Okamoto Hidetakaさん

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

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

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