Handling tables in a responsive way

  • I’m already using a responsive theme for my site, which changes the layout depending on the screen size of the device viewing the site. But I’m wanting to add a ‘table’ to my posts, where in the left column I have a list of ratings and in the right column I have an image. Ideally if someone is viewing in a small screen device, then instead of forcing the two columns to be next to each other, the image goes below the list instead.

    How should I implement this?

    Also, besides CSS changes, I would probably need to make HTML changes to my child theme for this. I could just write the HTML in my post itself but I would prefer to have a framework instead. If I am adding new HTML tags in a certain position instead of just changing the existing HTML attributes, how do I do this in a child theme?

Viewing 3 replies - 1 through 3 (of 3 total)
  • jack randall

    (@theotherlebowski)

    if the parent theme is already responsive then the child theme will be.

    as for css and html on your tables you should investigate @media (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp) and using percentages so that things stay relatively sized.

    Thread Starter melange

    (@melange)

    The parent theme is responsive but it does not contain the styling for these tables. I am adding the styles for the table myself. Or can I really just put the new table in and assume that the theme will handle it?

    Thanks for the @media tip, will look at how to make that work for my case.

    jack randall

    (@theotherlebowski)

    if you’re adding in the tables then you’re better off writing new css to handle the specific tables as the parent theme will likely have it’s own styles that it applies to tables it finds in posts and pages.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Handling tables in a responsive way’ is closed to new replies.