サポート » 使い方全般 » スマホでの表示

  • 解決済 mizugamiyuki

    (@mizugamiyuki)


    皆様、お世話になっております。

    質問失礼致します。

    現在ホームページを制作しているのですが、
    スマホではフロート(画像の回り込み)の解除をしたく、
    “@media screen and (max-width: 480px){
    .floatleft img{float:none;}
    }”
    を使用しているのですが、スマホで見た際も、PCで見た場合と同様にフロートがかかっております。

    “@media screen and (max-width: 480px){
    .floatleft img{float:none;}
    }”
    のスタイルは別のテンプレートでは機能しております。

    今回機能しない理由がお分かりになる方がいらっしゃいましたら、ご教授頂ければ幸いです。

    よろしくお願い致します。

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

    (@hideokamoto)

    CSSの優先順位が負けてるのではと思います。
    !importantはもう使わない!CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ : http://creator.aainc.co.jp/archives/4947

    トピック投稿者 mizugamiyuki

    (@mizugamiyuki)

    Okamoto Hidetaka様

    ご回答ありがとうございます!!

    !importantを使用してもダメでした。

    私はCSSに@media screen and (max-width: 480px)を記述したのですが効果がありません。
    また、!importantも効果がありませんでした。

    もしや、CSSに記載するのではなく「テーマの編集」のphpのどこかに記載する必要があるのでしょうか??

    ご回答頂ければ幸いです。

    よろしくお願い申し上げます。

    モデレーター Okamoto Hidetaka

    (@hideokamoto)

    CSSの問題はCSSで解決しないとです。

    効果がないということはまだ優先順位が負けているか
    そもそも対象のクラス指定が間違っているかだと思いますので、
    開発ツールを使ってデバッグしてみてください。

    作業効率が10倍アップする Chrome Developer Tools の使い方 : https://dl.dropboxusercontent.com/u/148989/slide/console.html

    横から失礼します。

    他のメディアクエリを使ってはいませんか?(@media screen and~が複数あるなど)
    メディアクエリは順番によっては読み込まれず無視されることがあります。

    または、CSSの読み込みそのものにメディアクエリがかかっていませんか?
    スマホで見たときとPCで見たときで読み込まれるCSSが違っているかもしれません。
    ユーザーエージェントやwp_is_mobile()を使用しているなら、それが原因かもしれません。

    Chromeなどのデベロッパツールでスマホデバイスのテストを行って、どのCSSが読み込まれるかテストしてみると良いかもしれません。

    トピック投稿者 mizugamiyuki

    (@mizugamiyuki)

    Okamoto Hidetaka様
    kazaisyu様

    ご回答ありがとうございます。

    無事に解決することができました!!

    『他のメディアクエリを使ってはいませんか?(@media screen and~が複数あるなど)』
    原因は複数の@media screen andを使っていたことだとわかりました。
    1つはテーマのSCCに。
    もう一つはプラグインのSCCに記載していました。

    テーマの@media screen andを削除したところ解決できました!

    お知恵を貸して頂いたOkamoto Hidetaka様、kazaisyu様
    本当にありがとうございました!!

    私も早く人の役に立てる立場になれるよう努力します!

    今後ともよろしくお願い申し上げます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「スマホでの表示」には新たに返信することはできません。