Making Tables Responsive for Mobile

[bryane]

Greatly appreciate any help to make the table in the "News Section" below responsive so it appears correctly on mobile?  Displays fine on desktop.  Below is a screenshot from my iPhone 6s where you can see the tables and header image extends over the right side of the page.

Thanks in advance for anyone's help!

[bryane]

@louiegerodiaz noticed you responded to a post from fmckeon1 a couple of months ago regarding an issue he was having with tables not displaying correctly on his blog.  I'm experiencing a similar issue in a newsletter.  Hoping you can assist and recommend how I can make the table responsive so it displays correctly on mobile. 

Thanks in advance for your help!

[edjusten]

Hi @bryane  Responsive tables for emails are a challenge indeed, and really not best practice. With all of the different ways email clients process html, there is no telling how it might show up in the various clients.  It would be better to find a different way to show that information in your email. 

This post from CSS-Tricks presents a few ideas on how to make your email more responsive. But this refers to the whole email rather than just a table within the email. You can most likely use a few of these tricks within the tables in your email. 

Tagging a few of our design partners here. Can you assist @dessery ,  @redbranchmedia , @grantfoster or @Gonzalo ?

Thank you,

Ed Justen

[bryane]

Thanks @edjusten!  To get the logos lined up correctly for each post HubSpot recommended using a table which seemed to work fine at first until running into display issues. 😉  I'll check out the post you shared.  Look forward to hearing from the design partners with any suggestions.   

[dessery · Accepted solution]

Hi @bryane

Responsive emails can be a pain at the best of times. In theory though, if your table has a width of 100%, it should adjust to the container around it. 

One common problem that we often run into though where the email client is ignoring that 100% is when images are involved, the main problem with this is the HubSpot editor annoyingly addds inline css with the width's and (sometimes) heights of the image file to the image tag. This higher width then forces the width of the table to be wider than its container and it breaks out of the box as shown in your screenshot. 

I would make sure your table has a css class asigned to it in your html, and then try something like this in the email header:

<style type="text/css">
    @media screen and (max-width: 650px) {
            .my_table_class img { width: auto !important; height: auto !important; max-width: 100%; } 
    }
</style>

Just make sure you replace .my_table_class with whatever class you have added to your table.

What this should do is force the height and width of your image to be automatically generated. The !important will override the inline styles that HubSpot have added. The max-width will make sure the image is no bigger than the column of the table it is in.

If that doesn't work, I would try setting a width instead of using width: auto and see if that helps.

I hope that helps point you in the right direction.

All the best

David

[TRooInbound]

Hi @bryane,

Yes, you can make table responsive with following this URL code,
https://css-tricks.com/examples/ResponsiveTables/responsive.php

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound
hello@trooinbound.com

[JulieS]

HI, I just see a table when I follow you rlink-- no code.

[bryane]

Thanks but I don't see the code or instructions what I need to do when I go to the CSS-Tricks page provided. I see an example of a Responsive and Non-Responsive Tables.  Please let me know what needs to be done.   Thx!