[Resolved] Checkout styling

Home Forums Support Checkout styling

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1054756
    ustar

    Hi, there!

    Is it possible to make delivery options in one column on the checkout page? As if more compact. Now it looks a little strange, especially on small screens (for example, iPhone 5).

    https://i.postimg.cc/pV7Tqg2L/2019-08-08-8-45-36.png
    https://i.postimg.cc/xdtjHZxY/2019-08-08-8-45-54.png
    https://i.postimg.cc/NMngCHvz/2019-08-08-8-46-10.png

    For better understanding you could take a look on the live site u-star.cz

    Thanks for your help!
    Regards, Sergey.

    #1054945
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (max-width: 768px) {
    
        /* reduce space between cart title and content */
        .woocommerce-checkout .entry-content {
            margin-top: 0.5em;
        }
    
        /* Display thumbnail align right of remove button */
        .woocommerce-page table.cart .product-thumbnail {
            display: block !important;
        }
    
        .woocommerce-page table.cart .product-thumbnail:before {
            display: none;
        }
    
        .woocommerce-page table.cart .product-remove {
            float: left;
            border-bottom: 0;
        }
    
        /* Force inputs to stack */ 
        .woocommerce #content table.cart td.actions .coupon .button,
        .woocommerce #content table.cart td.actions .coupon .input-text,
        .woocommerce #content table.cart td.actions .coupon input,
        .woocommerce table.cart td.actions .coupon .button,
        .woocommerce table.cart td.actions .coupon .input-text,
        .woocommerce table.cart td.actions .coupon input,
        .woocommerce-page #content table.cart td.actions .coupon .button,
        .woocommerce-page #content table.cart td.actions .coupon .input-text,
        .woocommerce-page #content table.cart td.actions .coupon input,
        .woocommerce-page table.cart td.actions .coupon .button,
        .woocommerce-page table.cart td.actions .coupon .input-text,
        .woocommerce-page table.cart td.actions .coupon input {
            width: 100%;
        }
    
        /* Stack Tables */
        .woocommerce table.shop_table tfoot th,
        .woocommerce table.shop_table tfoot td {
            display: block;
            width: 100%;
        }
    
    }
    #1055575
    ustar

    Hi, David!

    Tnank you! Much better!

    Regards, Sergey.

    #1055642
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.