• 解決済 kuma320

    (@kuma320)


    質問お許しください。

    wordpressにて作成した、tableを挿入したページをスマートフォンで表示する際、
    tableの幅にページを合わせることは可能でしょうか?
    ページの幅にテーブルを合わせるのではなく、テキストは小さくなっても構いませんので、
    テーブルが全体表示(スクロールバーなどを使わずに)されつつ、ページのサイズに合わせるように表示させたいです。

    小生のサイトは
    https://luckychloefan.jp
    です。スマートフォンで表示すると、トップページのテーブルがページからはみ出してスクロールバーにて右に
    スクロールさせないと全部を見ることが出来ません。

    テーマはsydneyを使用しております。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • CG

    (@du-bist-der-lenz)

    スクロールバーが出るのは、 table が固定幅になってませんか。
    パーセンテージにするか、スマートフォンはメディアクエリを適用しましょう。

    トピック投稿者 kuma320

    (@kuma320)

    tableに関しては、widthは設定されておらず固定幅にはなっていないと思います。

    メディアクエリですが、子テーマのheader.phpに

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    というコードがあり、

    style.cssの
    @media only screen and (max-width: 479px) {
    というブロックに

    .contents {
    width: 100%;
    }
    あるいは
    .table {
    width: 100%;
    }
    と入れてみましたが、改善されません。

    私の方法に間違いがあるのでしょうか?

    CG

    (@du-bist-der-lenz)

    tableはクラスではないはずですが、クラスを当ててるのでしょうか。

    トピック投稿者 kuma320

    (@kuma320)

    Du bist der Lenz様

    追加CSSの欄に

    @media screen and (max-width: 480px) {
    table{
    width:100%;
    table-layout: fixed;
    word-wrap: break-word;
    }
    .forum-width { max-width: 100%;}
    }

    にて解決いたしました。
    どうやら、コンタクトフォームをフッターウィジェットに配置していたのですが、それもレスポンシブになっていなかったようです。

    ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「スマートフォンにおけるテーブルの表示」には新たに返信することはできません。