Divs werden nicht reagieren

Question

Ich möchte einfach das div mit ID #knop neben dem #plusmin wenn der Bildschirm breit genug ist. Wenn der Bildschirm kleiner wird als die #knop unter dem PLUSMIN bekommen hat ...

habe ich versucht, al Art von Anzeigeoptionen im CSS ohne Wirkung ...

Siehe Seite: 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 am Beispiel-Seite zur Verfügung gestellt hat ein Inline-Stil-Attribut, das wahrscheinlich von einigen magento Javascript gesetzt wurde. Sie können es in Ihrer Browser Entwicklung Konsole sehen:

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

Dies wird Sie über Verschrauben weil Inline-Stil-Attribut Regeln Vorrang vor den CSS-Stilregeln nehmen. Als eine schnelle Lösung können Sie die CSS-Regel anhängen, die die Breite der div mit !important setzt. Solche Regeln können nicht durch Style-Attributregeln überschrieben werden.

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

Answer 2

Werfen Sie einen Blick here, müssen Sie @media Abfragen verwenden, um Ihre CSS anzupassen, wenn der Bildschirm x Pixel breit ist.

Wie als Beispiel:

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

    #plusmin { 
     width: 100%; 
    } 
}