[Support request] Exclude CSS from a class

[Daniel]

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;
}

}

[Leo]

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 🙂

[Author]

Posts