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

Store Design
, ,
1

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

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

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

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

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

1 Like
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