CSS Issue

i removed the

.responsive-stacked-table.with-mobile-labels td:nth-of-type(1):before {
content: "Model:";

bits

and now it works but doesn't have headers on mobile view

What exactly is the issue now? Both tables look identical to me. Something wrong on mobile?

yeah on mobile when they're stacked it used to have the catergory as a header in each section

but now it doesn't even if i have the data content thing in the td tag

desktop laptop view with catergories

this is how mobile view looks now

this is how it used to look

Sorry so is this all resolved now?

Everything looks good on my phone?
https://s7.postimg.org/45iw7zfaj/IMG_5512.png

no it is missing the headers in the stackable table

It's hard to tell what's going on, simply because I've never made responsive tables before. If the code you're following has no bugs, then the theme itself shouldn't cause any issues with the display.

Have you considered just using a plugin?: https://en-ca.wordpress.org/plugins/magic-liquidizer-responsive-table/

@John I'm just another GP user passing by but this thread caught my eye. I really love CSS and detangling CSS issues so I took a look at what you have on your site vs what's on the test page you linked.

Quick tip: if dealing with code that is working on one site but not on another, https://text-compare.com/ can be your best friend. A quick check shows that your live site is missing content: attr(data-category); from .responsive-stacked-table.with-mobile-labels td:before {

In other words:

    .responsive-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
        content: attr(data-category); /* here's the line you're missing */
    }

wekhter I could kiss you! thanks for the tip!

it's resolved!

i love the GP community!

Thanks, wekhter! :)