# スマホの商品ページが大きく表示されすぎる **URL:** \ **Category:** Store Design\ **Tags:** design, customizations, product-page\ **Created:** [October 23, 2024, 9:22am UTC](https://community.shopify.com/t/topic/368483 "2024-10-23T09:22:01Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary ユーザーは「Retina」テーマを使用しており、スマホで商品ページを開くと画像や商品詳細が大きく表示されすぎて画面からはみ出し、左側しか見えない問題に直面しています。 **主な問題点:** - 商品画像全体が画面に収まらず、右にスライドしないと見えない - 商品紹介テキストも同様に画面幅に収まっていない **提案された解決策:** PageFlyのAmeliaから、レスポンシブCSSを追加する方法が提案されました: 1. Shopify管理画面から「オンラインストア > テーマ > アクション > コードを編集」にアクセス 2. `theme.css`または`styles.css`ファイルを探す 3. 画像とテキストをモバイル画面に適切に表示させるCSSコードを追加 - 画像の最大幅を100%に設定 - モバイル用のパディングとマージンを調整 - テキストの折り返しを設定 4. 実装後、各種モバイルデバイスでテストを実施 レイアウト要件に応じて、CSSの微調整が必要になる可能性があります。
**Author:** ![bb-zbjd](https://avatars.discourse-cdn.com/v4/letter/b/e8c25b/32.png) [@bb-zbjd](https://community.shopify.com/u/bb-zbjd)\ **Post date:** [October 23, 2024, 9:22am UTC](https://community.shopify.com/t/topic/368483/1 "2024-10-23T09:22:01Z")
テーマは「Retina」を使用しています。 スマホの商品ページが大きく表示されすぎて、画面からはみ出るため、開いたときに、画像の左の方しか表示されません。 画面に商品画像全体を表示させたいのですが大きく表示されすぎて、右にスライドしていくような形になり、商品の全体像が見えません。 商品画像の下の商品紹介の文字についても同じです。 スマホでも一画面に商品画像や商品詳細文の幅全体を表示させたいのですが、どのようにすればいいのか、ご教授いただけないでしょうか。 ---
**Author:** ![PageFly-Amelia](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/pagefly-amelia/32/196956_2.png) [@PageFly-Amelia](https://community.shopify.com/u/PageFly-Amelia)\ **Post date:** [October 29, 2024, 6:46am UTC](https://community.shopify.com/t/topic/368483/2 "2024-10-29T06:46:10Z")
Hi @bb-zbjd , This is Amelia from PageFly - a Landing Page Builder App, To ensure that your product images and descriptions fit properly on mobile screens when using the Retina theme, you can adjust the CSS to make the images and text responsive. Here are the steps to achieve this: 1. **Access Theme Code** : 2. **Locate the CSS File** : 3. **Add Responsive CSS** : 4. **Test on Mobile Devices** : 5. **Adjust as Needed** : I hope that my solution works for you. Best regards, Amelia | PageFly