Display table td's as block element on mobile phone 1

[PeDa]

In my webpage here I am trying to display data in tables (text and image beside eacht other) on a computer and as block elements under each other on a mobile phone. I thought that the following would be enough to achieve this:

<style>
@media screen and (max-width:600px) table, table tr, table td {display:block;} 
</style>

... but apparently not; on the phone I still get tables. Any suggestion welcome.

 

[feherke]

Hi

@media screen and (max-width:600px) [highlight]{[/highlight] table, table tr, table td {display:block;} [highlight]}[/highlight]

Feherke.
feherke.github.io

 

[PeDa]

Hello Feherke,
Yes indeed! thanks yet again.
-Peter Da

 

[spamjim]

I won't dare deny feherke's genius but you may also benefit from a code editor that helps illustrate (via syntax highlighting) and verifies/validates CSS/HTML. Here's one free tool:

https://code.visualstudio.com/

You can also continue to use your current tool but test snippets in a online resource like this:

https://jigsaw.w3.org/css-validator/#validate_by_input+with_options