サポート » 使い方全般 » ipadminiタブレットのカラム落ち

  • 古いテーマを使用しておりますが、最近に、iPadminiにて確認をいたしましたところ、
    PCで正常に見れております、メインメニューの一番右側のひとつだけ、どうしても、カラム落ちして2段になってしまいます。

    タブレット用に、下記のソースから、修正をかけていきましたら、さらに、各メニューが立て並びになってしまい、どこを修正するとよいのかわからなくなってしまいました。
    もし、おわかりの方がいらっしゃいましたら、ぜひ、おおしえいただければ幸いです。
    初歩的なことがわかっていませんかもしれず、申し訳ございません。

    下記に、仕様状況もすこし記載いたしました。
    どうぞ よろしくお願い申し上げます。

    ☆タブレット用にいれたCSS
    /* add ===============================================
    画面の横幅が768pxまで(タブレット用・スマホ用)
    ===============================================*/
    @media screen and (max-width: 768px){

    .navigation {
    color: #888;
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
    }
    .navigation a:link,
    .navigation a:visited {
    color: #888;
    text-decoration: none;
    }
    .navigation a:active,
    .navigation a:hover {
    color: #ff4b33;
    }

    #access {
    background-image:url(http://www.holistic-kikou.com/wp-content/themes/twentyten/images/bg_navi_wh.jpg); /*メインメニュー 背景イメージ*/
    display: block;
    float: left;
    margin: 0 auto;
    width: 100%;
    /*add*/
    border-bottom:#aaa 1px solid;
    border-top:#aaa 1px solid;
    }

    #access .menu-header,
    ul.menu {
    font-size: 14px; /*13px*/
    margin-left: 0;
    width: 100%;
    border-right: #B9DAEA 1px solid;
    }

    #access .menu-header ul,
    ul.menu {
    list-style: none;
    margin: 0 ;
    /*add*/
    margin-left:0;
    border-right: #B9DAEA 1px solid;
    white-space:nowrap;
    }
    #access .menu-header li a,
    ul.menu li a{
    float: left;
    position: relative;
    /*add*/
    /* border-right: #B9DAEA 1px solid; */
    border-left: #B9DAEA 1px solid;
    height: 38px;
    padding: 0 5px;
    padding-left:5px;
    padding-right:5px;
    width: 150px;
    }

    #access a {
    color: #356BC6; /*#fff*/ /*メインメニュー 文字色*/
    display: block;
    line-height: 38px;
    padding: 0 20px 0 20px; /*各メインメニューの左右の余白幅 0 21px 0 20px; 0 9px 0 8px; タブレット 2623行あたり*/
    text-align:center;
    text-decoration: none;
    /*add*/
    font-weight:bold;
    white-space: nowrap; /*これで、メニュー、サブメニューの改行がなくなった*/
    width: 150px;
    }
    }

    ●テーマの情報(名称、入手先 URL、バージョン) : twentyten
    ●PHP、MySQL のバージョン : 5.6
    ●サーバー環境(ホスティングサービス名、OS、ウェブサーバー等) : lolipop
    ●ブラウザとそのバージョン : ipadmini4 Safari(PCでは正常に見れます。)

    ヘルプの必要なページ: [リンクを見るにはログイン]

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • こんにちは

    上に貼られているCSSがどこに書かれているものか、メニューが縦並びなのもどこのことか分かりませんが、カラム落ちだけは確認できました。

    http://www.holistic-kikou.com/wp-content/themes/twentyten/style.css
    の943行目
    width: px;

    width: 16.5%;
    に修正してみてください。

    お世話になります。
    早急なご回答をありがとうございました。

    すみません、メニューが縦並びになってしまったのは、いろいろ修正しているあいだに、iPadminiはかわらなかったのですが、試しにAmazonのタブレットでみましたら、縦並びになってしまったので、慌てて元にもどしていました。

    今、43行目に width: 16.5%; をいれてみたのですが、ちなみに、Amazonのタブレットでは、1行になったのですが、iPadminiは、そのまま固定され方のようにかわらずにおります。

    少し、数値をさげてみたりもしてみたのですが、変わらずにおります。

    以前に、ランダムに書き足したりしていました部分もあるかもしれず、もしもし、他にもなにか変なところにお気づかれましたら、お教えいただければ幸いです。

    どうもありがとうございました。
    どうぞ よろしくお願いいたします。

    iPadminiではダメでしたか・・・

    このフォーラムはWordPressのフォーラムなので、特定の端末での検証などは回答がつきにくいと思います。

    cssについて質問できるところで聞かれた方が回答が得やすいのではないでしょうか。

    お返事をありがとうございます。

    iPadと、iPadminiですと、また、違いますでしょうか?

    とりあえず、cssについて質問できるところなどもまた探してみたいと思います。

    見ていただいて、本当にありがとうございましたm(_ _)m。

    iPadと、iPadminiで違うのか、私には分かりません。
    すいません。

    こちらこそ、なんどもご質問をしてしまい、すみませんでした。
    どうもありがとうございました。

    こんにちは

    iPad mini でカラム落ちしないようですが・・・(修正済みでしょうか?)
    ブラウザのキャッシュをクリアしてみてはと思います。

    こんにちは。
    お返事をありがとうございました。

    今、キャッシュをけして見ましたら、なおっておりました!
    基本的なところが抜けており、すみませんでした。

    どうもありがとうございましたm(_ _)m。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ipadminiタブレットのカラム落ち」には新たに返信することはできません。