Search code examples
wordpresseventsmedia-queriesresponsive

How to make an event manager table (in wordpress) responsive on mobile ? with Media Queries?

I am a beginner in development and I am working on Wordpress exercice, more precisely on the event manager table.

On computer the view is good but on mobile version, my table doesn't fit well, it comes out of the mobile screen. I would like to adjust my table to make it more esthetic. I find a plugin to fix it but i am asked to use media queries.(my site: http://quentin-civiale.fr/activites-du-mois/)

Do you have a solution (css code) to help me ?

PS: sorry for my english i'm french ;-)

Solution

  • I solved the problem with this code:

    @media screen and (max-device-width: 980px)
    {
       th
          {display: none;}
       tr
          {display: flex; flex-direction: column;}
       td
          {display: flex; flex-direction: column;}

    }

    Thanks for your help !