スマホ表示時のtableがレスポンシブ対応になっていない

[HIROKO-M]

要件

スマホ表示の時に各投稿記事内の table が、横スクロールされてしまうため、画面内に収まるよう修正したい 例）https://sensitive-skin.real-cosme.net/?p=49632

![image][sensitive-skin.real-cosme.net__p=49632.png]

実装方法

.post_content .s_table のスタイルで white-space: nowrap;　が指定されているため @media (max-width: 990px)　で white-space: normal;　に切り替えれば横スクロールが消えると思います。

[HIROKO-M]

コメントなし

[HIROKO-M]

@松田 寛子 内容確認いたしました。 よろしくお願いします。

[HIROKO-M]

@松田 寛子 お疲れ様です。 問題となっていた箇所の修正、およびカスタムCSSに表示されていたエラーの修正が完了いたしました。お手すきの際にご確認よろしくお願いいたします。

[HIROKO-M]

@湊拓実 上記実装ありがとうございます！

@肥田麻乃 お疲れ様です。 上記の通りdev環境で修正完了しましたのでご確認をお願いいたします。 問題なければ、引き続き本番環境へCSSを反映させていただきます。

https://dev-sensitive-skin.real-cosme.net/?p=49632

なお、既存のカスタムCSSコードでエラーになっていた個所についても合わせて修正しております。 ご確認のほどよろしくお願いいたします。

[HIROKO-M]

@松田 寛子 おつかれさまです。 上記ご対応ありがとうございます。

dev環境にて確認いたしました。 私のスマホ（Pixel7）では一通り問題なく修正確認ができました。

メンバーのスマホ（iPhone11pro）で確認したところ、 ほとんどの記事は同じく問題ないのですが 一部完全にはレスポンシブになっていない記事があったようです。

サンプル） https://dev-sensitive-skin.real-cosme.net/?p=35377 ![image][IMG_3922.PNG]

※修正前の完全な非レスポンシブとは異なり、 多少の“ズレ”程度には修正されています。 想定内のズレということでしたらその旨教えてください。

念のため、明日ソフトウェアを最新にアップデートし、 再度、該当箇所を確認してもらう予定です。 寛子さんの方でも同じデバイスでの確認が可能でしたら よろしくお願いいたします。

なお、既存のカスタムCSSコードでエラーになっていた個所についても合わせて修正しております。 ご確認のほどよろしくお願いいたします。

→こちらもご対応ありがとうございます。

また明日ご報告させていただきます。

[HIROKO-M]

@肥田麻乃 cc@湊拓実 お疲れ様です。 先ほどお電話で原因を確認いただいた通り、 iPhone11Pro（375px）で表示した場合、テーブル内に埋め込まれたボタン（▷詳細をみる）が大きく、画面サイズを超えてテーブルが配置されていることが原因のようです。

REAL_COSME-10 にも記載しましたが、いったん現状のカスタムCSSを本番環境へ反映させていただきます。 その後、以下解決策のいずれかをご検討ください。

解決策

A. ボタンの横幅サイズを小さくする（カスタムCSSで改修）

B. 480px 以下の画面サイズで .p-article__contents の padding-right と padding-left を変更する（カスタムCSSで改修） 例）padding: 30px 25px 40px;　→ padding: 30px 15px 40px;　

C. ボタンをテーブルの外に配置する（投稿記事で改修）

本件、現段階の表示に問題がなければ「完了」してください。 上記A～Cで開発の対応が必要となった場合には、別課題を作成していただければと思います。

どうぞよろしくお願いいたします。

[HIROKO-M]

コメントなし

[HIROKO-M]

@松田 寛子 お疲れ様です。 修正反映を確認いたしました。

解決策についてもご教示いただきありがとうございます。 A.のボタン横幅サイズをカスタムにCSSで改修 にて対応したいと思います。 また別途問題が発生した場合は、ご相談させていただけますと幸いです。

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