diff --git a/app/webpacker/css/darkswarm/_shop-inputs.scss b/app/webpacker/css/darkswarm/_shop-inputs.scss index 98f4f7fecf..2523a3da7d 100644 --- a/app/webpacker/css/darkswarm/_shop-inputs.scss +++ b/app/webpacker/css/darkswarm/_shop-inputs.scss @@ -5,6 +5,12 @@ .row .columns.variant-quantity-column { padding-left: 0; } + + @media screen and (max-width: 425px) { + .row .columns.variant-quantity-column { + width: fit-content; + } + } } .reveal-modal.product-bulk-modal { diff --git a/app/webpacker/css/darkswarm/_shop-product-rows.scss b/app/webpacker/css/darkswarm/_shop-product-rows.scss index f731ec4ce6..4da9ba750e 100644 --- a/app/webpacker/css/darkswarm/_shop-product-rows.scss +++ b/app/webpacker/css/darkswarm/_shop-product-rows.scss @@ -22,6 +22,8 @@ // ROW VARIANTS .row.variants { + display: flex; + margin: 0 0 1em 0; &.out-of-stock { @@ -33,6 +35,7 @@ padding-top: .74em; } .variant-price { + flex: 1; padding-top: .65em; } @@ -67,12 +70,21 @@ margin-top: 15px; position: relative; left: -1px; + + span.unit_price_unit { + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } // Total price .total-price { padding-left: 0rem; color: $disabled-med; + width: fit-content; .filled { color: $med-drk-grey; @@ -82,6 +94,20 @@ display: none; } } + + @media screen and (max-width: 425px) { + .variant-price { + flex: 1; + } + + .variant-unit-price span.unit_price_unit { // creates an ellipsis when text overflow div size + width: 100%; + line-height: 1; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } } // ROW SUMMARY