Here is my custom CSS for Optimal Display. Enjoy !

I wanted to share my FULL CSS code for this wonderful script.

I tested this CSS on ALL devices.

And it looks great !

Enjoy !!

========================

/* Affects the Cart button in the sidebar BEGINS */

.dropdown-cart-button {
font-size: 14px;
font-weight: normal;
width: 240px !important;
min-height: 35px;
border: 1px solid #CCC;
text-align: left;
padding: 0px 10px 0px 36px;
margin: 0px;
position: relative;
z-index: 10 !important; /* Lowered this from 9999 since it overlapped the sticky headers navig bar */
overflow: visible;
background: transparent url(“../images/cart.png”) no-repeat scroll 0px center;
}

.dropdown-cart-button .dropdown {
display: none;
position: absolute;
right: -101px !important;
top: 34px;
background: #FFF none repeat scroll 0% 0%;
border: 1px solid #CCC;
padding: 10px 6px 8px;
width: 340px !important;
}

.dropdown-cart-button .dropdown .cart_list img {
width: 80px !important;
margin-right: 4px;
float: left;
}

.dropdown-cart-button .dropdown .cart_list a {
float: left;
font-weight: normal !important;
width: 75% !important;
}

.dropdown-cart-button .dropdown .cart_list .quantity {
float: right;
width: 22%;
font-weight: bold !important;
color: #F308C7 !important;
margin: -12px 12px 12px 12px !important;
}

.dropdown-cart-button .dropdown .total {
clear: both;
float: left;
color: #00B7FF !important;
}

.dropdown-cart-button .dropdown .buttons {
text-align: center !important;
}

p + p {
margin-top: 35px !important;
}

/* Affects the Cart button in the sidebar ENDS */

/* Affects the DROPDOWN View Cart and Checkout buttons in the sidebar BEGINS */

.dropdown-cart-button .button {
margin-left: 10px !important;
padding: -5px 6px -5px 6px !important;
border-radius: 5px !important;
}

.dropdown-cart-button .dropdown .buttons {
display: inline-flex !important;
float: right !important;
}

/* Affects the DROPDOWN View Cart and Checkout buttons in the sidebar ENDS */

https://www.ads-software.com/plugins/woocommerce-dropdown-cart/