My Shopify Liquid doesn't display fully on mobile devices

[hkmlc]

My website ： HKMLC Smart Board （hkmlc-us.com）

[hkmlc]

@BSS-Commerce 

[wo]

You added content without considering using media queries to optimize the mobile style.

[hkmlc]

如何实现移动适配

[hkmlc]

How can I achieve mobile adaptation

[hkmlc]

Most of the content uses liquid

[Small_Task_Help]

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>