Need help making table responsive using CSS in Corporate Theme

• 

  mnmktgservices · Member · Nov 28, 2016 at 10:40 pm

  • Copy link
  • Add topic to favorites

  Hello, I am having some trouble making a table mobile responsive. It *will* load when the device is turned into landscape view, however it does not resize or even give a horizontal scroll bar when kept in portrait view.

  The Corporate Theme supports the grid system, however I was unable to make that look/act like a table especially since I needed the equivalent of colspans.

  This theme does have documentation on the table code (which I used) however it’s not responsive. Your help is appreciated!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 30, 2016 at 4:51 pm

  • Copy link

  Hi there, where is the table on your site so I can take a look at it?

• 

  thesacredpath · Member · Nov 30, 2016 at 4:53 pm

  • Copy link

  Also, I’m not seeing any example table code on the Corporate documentation. Where did you find that?

• 

  mnmktgservices · Member · Nov 30, 2016 at 6:38 pm

  • Copy link

  Tables on theme page: https://corporatethemedemo.wordpress.com/docs/common-page-elements/#tables

• 

  mnmktgservices · Member · Nov 30, 2016 at 6:53 pm

  • Copy link

  I was able to fix the issue. Turns out that on mobile – the font sizes don’t resize so it kept pushing the columns out in width.

  I ended up coding 2 separate tables. Using div classes to name one content-desktop and the other content-mobile. Then using CSS I used display: inline and display: none under @media to hide the mobile version of the tables on desktop and vice versa.

• 

  thesacredpath · Member · Dec 5, 2016 at 5:23 pm

  • Copy link

  Great job and great solution! Let us know if you have additional questions.