Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
You added content without considering using media queries to optimize the mobile style.
如何实现移动适配
How can I achieve mobile adaptation
Most of the content uses liquid
Hi,
You can implement CSS media queries and avoid fixed widths
Responsive liquid code example which you can use to ensure product images and descriptions are responsive
<div class="product">
<div class="product-image">
<img
src="{{ product.featured_image | img_url: '400x400' }}"
srcset="{{ product.featured_image | img_url: '200x200' }} 200w, {{ product.featured_image | img_url: '400x400' }} 400w"
sizes="(max-width: 600px) 200px, 400px"
alt="{{ product.title }}">
</div>
<div class="product-description">
<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>
</div>
</div>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025