スマホの商品ページが大きく表示されすぎる

Store Design
, ,

AI-generated summary

ユーザーは「Retina」テーマを使用しており、スマホで商品ページを開くと画像や商品詳細が大きく表示されすぎて画面からはみ出し、左側しか見えない問題に直面しています。

主な問題点:

  • 商品画像全体が画面に収まらず、右にスライドしないと見えない
  • 商品紹介テキストも同様に画面幅に収まっていない

提案された解決策:

PageFlyのAmeliaから、レスポンシブCSSを追加する方法が提案されました:

  1. Shopify管理画面から「オンラインストア > テーマ > アクション > コードを編集」にアクセス
  2. theme.cssまたはstyles.cssファイルを探す
  3. 画像とテキストをモバイル画面に適切に表示させるCSSコードを追加
    • 画像の最大幅を100%に設定
    • モバイル用のパディングとマージンを調整
    • テキストの折り返しを設定
  4. 実装後、各種モバイルデバイスでテストを実施

レイアウト要件に応じて、CSSの微調整が必要になる可能性があります。

1

テーマは「Retina」を使用しています。

スマホの商品ページが大きく表示されすぎて、画面からはみ出るため、開いたときに、画像の左の方しか表示されません。

画面に商品画像全体を表示させたいのですが大きく表示されすぎて、右にスライドしていくような形になり、商品の全体像が見えません。

商品画像の下の商品紹介の文字についても同じです。

スマホでも一画面に商品画像や商品詳細文の幅全体を表示させたいのですが、どのようにすればいいのか、ご教授いただけないでしょうか。

2

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:

    • Go to your Shopify Admin.
    • Navigate to Online Store > Themes > Actions > Edit Code.

  2. Locate the CSS File:

    • Find the CSS file, usually named theme.css or styles.css, under Assets.

  3. Add Responsive CSS:

    • Add the following CSS to ensure that images and text scale properly on mobile devices:

      /* Ensure images fit within the screen */
.product-single__photo img {
  max-width: 100%;
  height: auto;
}

/* Ensure text fits within the screen */
.product-single__description {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Adjust padding and margins for mobile */
@media (max-width: 768px) {
  .product-single__photo {
    padding: 0;
  }

  .product-single__description {
    padding: 0 15px;
  }
}

  4. Test on Mobile Devices:

    • After adding the CSS, test your product pages on various mobile devices to ensure the images and text are displayed correctly.

  5. Adjust as Needed:

    • Depending on your specific design and layout requirements, you may need to tweak the CSS further.

I hope that my solution works for you.

Best regards,

Amelia | PageFly