#pdproductattributeslist { width: 100%; margin-top: 15px; margin-right: 9px; margin-left: 9px; } #pdproductattributeslist table {} #pdproductattributeslist input.quantity {} #pdproductattributeslist .old_price { font-size: 12px; text-decoration: line-through; display: inline-block; } #pdproductattributeslist .price { font-weight: bold; } #pdproductattributeslist .bootstrap-touchspin .input-group-btn-vertical i { left: 4px; } #pdproductattributeslist table td.option_infos .product-title { text-transform: capitalize; margin: .5rem 0; text-align: unset; } /** RESPOINSIVE TABLE **/ #pdproductattributeslist td, #pdproductattributeslist th { vertical-align: middle; text-align: center; padding-top: .75rem; padding-bottom: .75rem; } #pdproductattributeslist th { font-size: 13px; } #pdproductattributeslist .option_image a.hidden { display: none; } #pdproductattributeslist th.product_image { width: 10%; } #pdproductattributeslist th.product_infos {} #pdproductattributeslist th.product_price { width: 12%; } #pdproductattributeslist th.product_variant { width: 10%; } #pdproductattributeslist th.product_qty { width: 10%; } #pdproductattributeslist th.product_btn { width: 12%; } #pdproductattributeslist .footer_actions { background: #ddd; } #pdproductattributeslist b, #pdproductattributeslist strong { margin-bottom: 0.3rem; display: inline-block; } #category .product-quantity>.col { margin-bottom: .0rem; } #pdproductattributeslist .option_gty .product-quantity { max-width: 200px; } #pdproductattributeslist .product-quantity .qty { width: 100% } #pdproductattributeslist .add-to-cart-pdproductattributeslist { width: 100%; } #pdproductattributeslist .product-quantity .quantity { width: 3rem; height: 2.75rem; padding: .175rem .5rem; color: #232323; background-color: #fff; } #pdproductattributeslist .product-quantity .bootstrap-touchspin { float: unset; text-align: center; margin: 0 auto; } /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { #pdproductattributeslist table { width: 100%; } /* Force table to not be like tables anymore */ #pdproductattributeslist table, #pdproductattributeslist thead, #pdproductattributeslist tbody, #pdproductattributeslist th, #pdproductattributeslist td, #pdproductattributeslist tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #pdproductattributeslist thead tr { position: absolute; top: -9999px; left: -9999px; } #pdproductattributeslist tr { border: 1px solid #ccc; } #pdproductattributeslist td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } #pdproductattributeslist td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; /* Label the data */ content: attr(data-column); color: #000; font-weight: bold; text-align: center; } } #pdproductattributeslist .grid .product-description { height: 120px; } #pdproductattributeslist .grid .thumbnail-container { height: 388px; } #pdproductattributeslist .grid .thumbnail-container form { text-align: center; margin: 10px 0 10px 0; } #pdproductattributeslist .grid .thumbnail-container:hover .highlighted-informations { bottom: 8.625rem; } #pdproductattributeslist .grid .thumbnail-container:hover .highlighted-informations.no-variants { bottom: 6.375rem; } #pdproductattributeslist .grid .add-to-cart-or-refresh { text-align: center; } #pdproductattributeslist .grid input.qtyfield { padding: 0 6px; margin: 0 5px 0 5px; vertical-align: bottom; display: inline; float: unset; } #pdproductattributeslist .grid .product-quantity input.qtyfield { width: 100%; text-align: center; height: 48px; border: 0; border-radius: 5px; } #pdproductattributeslist .grid .product-quantity .qty { margin-right: 10px; } @media (max-width: 768px) { #pdproductattributeslist .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; overflow-x: scroll; border: 1px solid #d6d4d4; } #pdproductattributeslist .table-responsive>.table { margin-bottom: 0; background-color: #fff; } #pdproductattributeslist .table-responsive>.table>thead>tr>th, #pdproductattributeslist .table-responsive>.table>thead>tr>td, #pdproductattributeslist .table-responsive>.table>tbody>tr>th, #pdproductattributeslist .table-responsive>.table>tbody>tr>td, #pdproductattributeslist .table-responsive>.table>tfoot>tr>th, #pdproductattributeslist .table-responsive>.table>tfoot>tr>td { white-space: nowrap; } #pdproductattributeslist .table-responsive>.table-bordered { border: 0; } #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>th:first-child, #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>td:first-child, #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>th:first-child, #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>td:first-child, #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>th:first-child, #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>td:first-child { border-left: 0; } #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>th:last-child, #pdproductattributeslist .table-responsive>.table-bordered>thead>tr>td:last-child, #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>th:last-child, #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr>td:last-child, #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>th:last-child, #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr>td:last-child { border-right: 0; } #pdproductattributeslist .table-responsive>.table-bordered>thead>tr:last-child>th, #pdproductattributeslist .table-responsive>.table-bordered>thead>tr:last-child>td, #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr:last-child>th, #pdproductattributeslist .table-responsive>.table-bordered>tbody>tr:last-child>td, #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr:last-child>th, #pdproductattributeslist .table-responsive>.table-bordered>tfoot>tr:last-child>td { border-bottom: 0; } #pdproductattributeslist tr.footer_actions td { height: 50px; } } #pdproductattributeslist_grid .product-quantity, #pdproductattributeslist_grid button.add-to-cart { width: 100%; margin-top: 10px; } #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.form-control, #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin input.input-group { width: auto; height: 2.75rem; } #pdproductattributeslist_grid .product-quantity .bootstrap-touchspin { margin: 0 auto; }