Stack table elements on small screens

[wicara]

hello, I would like to stack the label and the variation elements for variation products. I can see they are in columns but I would like to change them to rows at certain widths. Is there a way for me to tell the table elements to stack at a certain width ?
http://x.aiadstaging.com.au/projects/rodburn.com.au

[jade]

Hi there,

You can do that by adding some custom CSS in X > Theme Options > CSS:

@media (max-width: 480px) {
    .variations td {
        width: 100%;
       display: block;
    }
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps.

[wicara]

Thank you soo much

[jade]

You’re welcome!

[wicara]

how would I do it when the table got to a width and not a screen

[rad]

Hi @wicara,

That’s not possible as @media blocks are for the device screen only.

Thanks!