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

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

bb-zbjd
Visitor
2 0 1

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

 

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

 

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

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

 

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

Reply 1 (1)

PageFly-Amelia
Shopify Partner
603 165 236

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.