[Support request] Exclude CSS from a class

Home Forums Support Exclude CSS from a class

  • This topic has 1 reply, 2 voices, and was last updated 9 months ago by Leo.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1142757
    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;
    }
    
    }
    #1142844
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.