Woo Thank you -> Fitting 4 columns downloads table on mobile

Feature Requests / Improvements
1

Here having a bad time adjusting the table Downloads from Woo Thank you template on vertical mobile.

This is a 4 columns table, with download buttons, expiry dates, long “Downloads Remainging” title and product title, which is nearly impossible to make look good on mobile under 400px.

Should be this better a flex container?

2

That is unusable on mobile. It breaks the whole layout. It’s a bug.

3

Move this topic to BUGS and do this for the workaround:

Put this in the checkout-thank-you template in the Custom CSS for the Mobile Landscape (<=768px) breakpoint:

%root% .woocommerce-MyAccount-orders thead, %root% .woocommerce-table--order-downloads thead {
    display: none;
}

%root% .woocommerce-MyAccount-orders tbody td, %root% .woocommerce-table--order-downloads tbody td {
        display: block;
        text-align: right;
}

%root% .woocommerce-MyAccount-orders tbody td:before, %root% .woocommerce-table--order-downloads tbody td:before {
    content: attr(data-title);
    display: table;
    float: left;
    font-weight: 700;
}

Put this at the base breakpoint:

%root% .woocommerce-table--order-downloads.shop_table td, %root%  .woocommerce-table--order-downloads.shop_table th {
    padding: 15px 0;
}
1 Like
4

Thanks, the CSS fix works very well.

1 Like