固定ページのモバイル表示、4インチ端末で左に寄っている件について

PR 2016/5/25

このトピックには2件の返信、1人の参加者があり、最後にawanotanukiにより10年、 3ヶ月前に更新されました。

2件の返信スレッドを表示中

投稿者

投稿
- 2016年5月25日 2:42 PM #41427
  
  awanotanuki
  ゲスト
  
  いつもsimplicityを使わせて頂き、ありがとうございます！
  
  表題の件ですが、固定ページにモバイルでアクセスしたとき
  スマホの4インチ端末だと、文字が左に寄ってしまっているようです。
  
  おそらくcssを修正すればよいのだと思うのですが
  どこをどう修正したらよいか教えて頂けますでしょうか？
  
  ▼iPhoneSE（4インチ：NG）とXperia z1f（4.3インチ：OK）の画面キャプチャー
  https://goo.gl/ywbrHt （Aunサイト）
  
  ※画面キャプチャーしていませんが、Xperia Ray（3.3インチ）でも
  　文字が左に寄っています。
  
  ▼キャプチャーしたページURL（4インチ端末をお持ちでしたら実機で確認ください）
  https://www.english-speaking.jp/grammar-imagelink/
  
  恐れ入りますが、お手すきでご確認よろしくお願いします。
- 2016年5月25日 3:25 PM #41428
  Hidekichi
  ゲスト
```
<Ｓtyle id='extension-style-inline-css' type='text/css'>

#main{
  float:right;
}

/* 略 */
</Ｓtyle>
```
  ※ 投稿できなかったので一部全角にしています。
  
  これが原因だろうと思います。extension-style-inline-cssがどこから書かれているものかはわかりませんが、headの中に入っていたと思うので、子テーマstyle.cssでは上書きできません(!important付きを除く)。
  
  メディアクエリを追加して、320までの端末ではfloat: none;にしてみてはどうかと思います。
```
@media screen and (max-width: 20em) {
  #main {
    float: none;
    /*子テーマでやる場合は、
     float: none !important;
    */
  }
}
```
  またブログカードのmin-widthも取るほうが美しく表示されるかも知れません。
```
.blog-card {
    min-width: unset;
}
```
  これらはnarrow.cssにかかれていますが、子テーマstyle.cssでも良いと思います。メディアクエリに追加です。
- 2016年5月25日 3:40 PM #41431
  awanotanuki
  ゲスト
  Hidekichiさん
  
  さっそくのご確認ありがとうございます！
  子テーマstyle.cssに以下の記述を追加したところ、左寄せがなくなって見やすくなりました！
```
@media screen and (max-width: 20em) {
  #main {
    float: none !important;
  }
}
.blog-card {
    min-width: unset;
}
```
  コードまで教えて頂き、助かりました。ありがとうございます！
投稿者

投稿