Docs

[allcal]

I need help styling the mobile version on the Woocommerce single product short description in a product category layout. Example: http://printmorespendless.com/allcal/product-category/p-touch/labeling-sys/desktop-models/ The product short description is set up as a table with two columns. Left column has text, the right column is another table with pricing. It shows correctly on a desktop, but not mobile. The columns were two narrow so I added some css to display on mobile in block. Display the text on top of the pricing table. However, I only want the outer table to display block (not the pricing table inside that table column). I want the pricing table to have the same formatting as without the display:block. How can I do that?

@media only screen and (max-width: 480px) {
.archive td {width:100% !important ; display: block; text-align:center; }
}

For the example, product category: http://printmorespendless.com/allcal/product-category/p-touch/labeling-sys/desktop-models/

First product example: http://printmorespendless.com/allcal/product/p-touch/pt-d600vp/

[Christopher]

Hi there,

Please add this :

@media (max-width: 480px){
.single-product .entry-summary table:first-of-type {
    width: 100% !important;
}
}

Hope it helps.

[Author]

Posts