Divの応答が得られません

Question

画面が十分に広い場合、#plusminの隣にID #knopのdivが必要です。画面は#knopよりも小さくなると... Plusmin下

を取得する必要があり、私は

ページを参照してください...効果なしとCSSでの表示オプションのアル種類を試してみました：https://www.tricotstoffen.nl/tricot-stoffen/dierenprint/stenzo-tricot-konijnen-zwart-wit-bio-katoen.html

<div class="product-add-form"> 
<form action="https://www.tricotstoffen.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cudHJpY290c3RvZmZlbi5ubC90cmljb3Qtc3RvZmZlbi9kaWVyZW5wcmludC9zdGVuem8tdHJpY290LWtvbmlqbmVuLXp3YXJ0LXdpdC1iaW8ta2F0b2VuLmh0bWw,/product/324/" method="post" 
     id="product_addtocart_form"> 
    <input type="hidden" name="product" value="324" /> 
    <input type="hidden" name="selected_configurable_option" value="" /> 
    <input type="hidden" name="related_product" id="related-products-field" value="" /> 
    <input name="form_key" type="hidden" value="xmAH6XJ8Kvrn2FTs" />       <style type="text/css"> 
#box{ 
    width: 100%; 
    min-height: 55px; 
    display: inline-table; 
} 

#plusmin{ 
    width: 210px; 
    height: 55px; 
    float: left; 
    padding-left: 3px; 
    margin-bottom:10px; 
} 
#knop{ 
    height: 55px; 
    width: 175px; 
    float: left; 
} 

</style> 
<div class="box-tocart" id="box"> 
<div class="fieldset"> 
      <div class="field qty" id="plusmin"> 
     <label class="label" for="qty"><span>Aantal</span></label> 
<div class="control" data-bind="scope: 'qty_change'"> 

<button data-bind="click: decreaseQty">-</button> 

<input data-bind="value: qty()" 
     type="number" 
     name="qty" 
     id="qty" 
     maxlength="12" 
     title="Aantal" class="input-text qty" 
     data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:0.5}}" 
    /> 
<button data-bind="click: increaseQty">+</button> 
</div> 
<script type="text/x-magento-init"> 
{ 
    "*": { 
     "Magento_Ui/js/core/app": { 
      "components": { 
       "qty_change": { 
        "component": "Jilco_plusminknoppen/js/view/product/view/qty_change", 
        "defaultQty": 0.5     } 
      } 
     } 
    } 
} 
</script> 


    </div> 
      <div class="actions" id="knop"> 
     <button type="submit" 
       title="In Winkelwagen" 
       class="action primary tocart" 
       id="product-addtocart-button"> 
      <span>In winkelwagen</span> 
     </button> 
       </div> 
</div> 
</div> 
<script type="text/x-magento-init"> 
{ 
    "#product_addtocart_form": { 
     "Magento_Catalog/product/view/validation": { 
      "radioCheckboxClosest": ".nested" 
     } 
    } 
} 
</script> 

       </form> 
</div> 

を

Answer 1

div#plusminは、おそらくいくつかのMagentoのジャバスクリプトによって設定されたインラインスタイル属性を持っています。あなたは、あなたのブラウザの開発コンソールでそれを見ることができます。インラインスタイル属性のルールは、CSSスタイルルールよりも優先されるため

<div class="field qty" id="plusmin" style="width: 100%; display: block;"> 
    ... 
</div> 

これはあなたをねじ込むされます。クイックフィックスとしてdivの幅を!importantに設定するCSSルールを追加することができます。そのような規則は、スタイル属性規則によって上書きすることはできません。

#plusmin{ 
    width: 210px !important; 
    ... 
} 

Answer 2

hereをご覧になる場合は、画面がxピクセルの場合に@mediaクエリを使用してCSSを調整する必要があります。一例としてとして

：あなたが提供した例ページで

@media screen and (max-width: 400px) { 
    #knop { 
     width: 100%; 
    } 

    #plusmin { 
     width: 100%; 
    } 
}