如何在Shopify中制作响应式表单？

Question

我一直在试图弄清楚如何制作一个对Shopify有效的自定义字段表单。

        <div class="one-whole">
           <div class="one-half">
            <label for="groom_name">Groom's First Name</label>
            <input required type="text" id="groom_name" name="properties[groom_name]" placeholder="Groom">
           </div>
           <div class="one-half">
            <label for="bride_name">Bride's First Name</label>
            <input required type="text" id="bride_name" name="properties[bride_name]" placeholder="Bride">
           </div>
            <label for="last_name">Last Name</label>
            <input required type="text" id="last_name" name="properties[Last Name]" placeholder="Last Name">
            <label for="wedding_date">Wedding Date</label>
            <input required type="date" name="wedding_date">

            <label for="city">City</label>
            <input required type="text" id="city" name="properties[City]" placeholder="City">
            <label for="state">State</label>

        </div>

这就是代码，这就是我得到的。

我尝试过whole和one-half并将每个输入分成自己的div。似乎总是左对齐，现在正在包装。

我希望Groom Name和Bride Name在同一条线上。但是当移动设备崩溃时。

Answer 1

这个问题是关于css not liquid或shopify。

您要查找的课程已记录在案here。

尝试grid__item small--one-whole medium--one-half

之类的内容