Shopify themes, liquid, logos, and UX
テーマは「Retina」を使用しています。
スマホの商品ページが大きく表示されすぎて、画面からはみ出るため、開いたときに、画像の左の方しか表示されません。
画面に商品画像全体を表示させたいのですが大きく表示されすぎて、右にスライドしていくような形になり、商品の全体像が見えません。
商品画像の下の商品紹介の文字についても同じです。
スマホでも一画面に商品画像や商品詳細文の幅全体を表示させたいのですが、どのようにすればいいのか、ご教授いただけないでしょうか。
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:
Access Theme Code:
Locate the CSS File:
Add Responsive CSS:
/* 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; } }
Test on Mobile Devices:
Adjust as Needed:
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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024