Archived topic
Exclude CSS from a class
1 reply · Started by Daniel on January 24, 2020
Hi,
I found some code on this forum for customising the WooCommerce cart/basket page on mobile view. The code works great and does exactly what I want, BUT it doesn't work properly with the Elementor Basket Menu widget.
Basically, I need to modify my code so as to EXCLUDE the CSS from being applied to this widget. I've given the widget the following class:
.header-basket-widget
Here is the code I want to modify:
(I believe I need to use the :not(.header-basket-widget) code, but I don't know where to put it? I'm not very good with CSS and have tried a few different places without success :)
@media only screen and ( max-width: 768px ) {
/*Romove Alternate rows shading*/
.woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{
background: transparent;
}
/*Aligning Text in cart table*/
.woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td {
text-align: left !important;
}
/*Too lazy to remember why I did this one*/
.woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before{
content: none !important;
}
.woocommerce #content table.cart .product-thumbnail,
.woocommerce table.cart .product-thumbnail,
.woocommerce-page #content table.cart .product-thumbnail,
.woocommerce-page table.cart .product-thumbnail{
display: block !important;
}
/*Fixing Coupon Area*/
.woocommerce table.shop_table_responsive tr, .woocommerce-page table.shop_table_responsive tr {
display: block;
clear: both;
/*min-height: 120px;*/
border-bottom: 1px solid #ededed;
padding: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals table th{
display: block;
width:90%;
}
/*Removing Borders bottoms on checkout table*/
.woocommerce-cart-form__cart-item.cart_item td {
border: none !important;
}
/*Product Remove*/
.woocommerce-cart-form__cart-item.cart_item .product-remove {
width: 5%;
float: left;
padding: 0;
}
/*Product Thumbnail*/
.woocommerce-cart-form__cart-item.cart_item .product-thumbnail {
width: 20%;
padding: 8px;
float: left;
}
.woocommerce-cart table.cart img{
width: 100%;
}
/*Product Name*/
.woocommerce-cart-form__cart-item.cart_item .product-name{
width: 70%;
float:left;
padding: 5px 2px 10px 2px;
}
.woocommerce-cart-form__cart-item.cart_item .product-name{
font-size: 15px;
}
/*Product Price*/
.woocommerce-cart-form__cart-item.cart_item .product-price {
width: 30%;
padding: 5px;
float: left;
font-weight: bold;
font-size: 14px;
}
/*Product Quantity*/
.woocommerce-cart-form__cart-item.cart_item .product-quantity {
display: inline-block;
float: right;
padding: 0;
}
/*Product subtotal hide*/
.woocommerce-cart-form__cart-item.cart_item .product-subtotal{
display: none;
}
/*Total price before pay button*/
.shop_table .order-total .woocommerce-Price-amount.amount {
font-size: 1.2em;
}
.shop_table .shipping .woocommerce-Price-amount.amount {
font-size: 1.0em;
}
}
Hi there,
Which line of CSS is causing the issue?
:not(.class) can be used basically the same way as without :not.
I find the first example here explains it pretty well:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
Have a look and if you are still confused, let me know exactly which CSS above is causing the issue :)