「本文のみ（狭い）」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける

[leda]

わいひら様

お世話になります。
バージョン：2.6.0.9 をカスタマイズなしで使用させていただいております。

現在、下記ページを
https://bitter-cinnamon.com/evidence/?amp=1

「ページ設定」を、「本文のみ（狭い）」に設定して公開しております。

しかし、「ページ設定」を、「1カラム（狭い）」か、「本文のみ（狭い）」に
設定してAMPページをスマホで閲覧すると、
下記の画像のように、テキスト等がスマホ画面の幅で折り返さず、右側に突き抜けてしまいます。

https://bitter-cinnamon.com/wp-content/uploads/2018/04/amppage01.jpg
https://bitter-cinnamon.com/wp-content/uploads/2018/04/amppage02.jpg

「ページ設定」を、「デフォルト」、「1カラム（広い）」、「本文のみ（広い）」にすると直るようです。

この現象につきまして、もし、そちらのスマホでも再現性がありましたら、
ご対応いただきたくお願いいたします。

「1カラム（狭い）」か、「本文のみ（狭い）」の場合、
AMPページでもPC用の　width が有効になってしまってはいないでしょうか？
改行位置がPCとだいたい同じです。

お手数をおかけして恐縮ですが、よろしくお願いいたします。

[わいひら]

親テーマフォルダ内のamp.cssに以下のように追記すれば改善されるかと思います。

@media screen and (max-width: 740px){
  #header-in, #navi-in, #body-in, #footer-in{
    width: auto;
  }
}

これでうまくいけば、次のバージョンで適用したいと思います。

[leda]

お世話になります。

上記のコードを　amp.css　の一番最後に追加しましたが、
表示は変わらないようです。

とりあえず、私のサイトは閲覧者の90%以上がスマホなので、
PC表示は意図するものとは違いますが、
「本文のみ（広い）」で公開することにいたします。

他に影響が出ていると困りますので
amp.css　はこれから元に戻します。

問題が修正された次のバージョンがリリースされたら使用させていただきます。

お忙しい中、ありがとうございました。

[leda]

お世話になります。
バージョンアップされた　Simplicityを2.6.8 を使用させていただきました。
しかしながら、下記の画像のように、スマホのwidthにならない問題が改善されておりません。
https://bitter-cinnamon.com/wp-content/uploads/2018/06/IMG_0471-577×1024.png

《上記記事のURL》
https://bitter-cinnamon.com/batuiti/?amp=1

6.「本文のみ（狭い）」に設定した記事のAMPページがスマホのwidthにならず右に突き抜ける不具合修正

と記載されていましたが、こちらの修正は反映されていないのでしょうか？
お手数をお掛けしますがご回答の程よろしくお願いいたします。

[Akira]

親テーマの amp.css の後に、親テーマの css-custom.php が読み込まれているのが原因みたいです。

css-custom.php の下記の部分が amp.css より後に読み込まれているので、画面幅 740px 以下で #body-in の幅が 740px になっています。

<?php //ページタイプが狭いか
if ( is_singular() && is_page_type_narrow() ): ?>
#header-in, #navi-in, #body-in, #footer-in {
  width: 740px;
}

#sidebar,
.top-sns-follows{
  display: none;
}
<?php endif;//is_page_type_narrow ?>

子テーマの amp.css に下記の CSS を追加すると、親テーマの対応を待たずにすぐに修正できます。

@media screen and (max-width: 740px) {
  #header-in, #navi-in, #body-in, #footer-in {
    width: auto;
  }
}

[わいひら]

一応、修正してみたものをアップしておきます。
https://wp-simplicity.com/wp-content/uploads/2018/06/simplicity2.zip

[投稿者]

投稿