Table not responsive on mobile

Marketing & Content Hub Blog, Website & Page Publishing
1

Hi there

We are building a landing page where we have a table to compare different products however the table isn’t responsive on mobile. We would like to be able to scroll horizontally on mobile, we tried a few things here and there that we found on this community but nothing seems to work. Is anyone able to help please?

Thank you

2

Hi @laura_kit, I hope that you are well!
Great question, thanks for asking the HubSpot Community and well done on researching previous posts on the Community! :raising_hands:
In your research, did you find these amazing answers:
- The solutions from @Anton and @Kevin-C on this post “Making a responsive table using CSS”
- The solution from @Teun on this post “Table display on mobile”
I’d love to ask our Top Experts as well: Hi @Anton and @Jake_Lett do you have other suggestions or tips to add to help @laura_kit, please?
Have a wonderful day and thanks so much in advance for your help! :heart:
Bérangère

3

Hi @laura_kit,

This depends on the theme used. Would you mind sharing the page URL?

4

Hi @laura_kit,
To fix the issue, wrap your table in a div like this:

<div class="responsive-table-wrapper">
 <table>
 <!-- your table rows and columns -->
 </table>
</div>

Then add this CSS to your landing page stylesheet or custom module:

.responsive-table-wrapper {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.responsive-table-wrapper table {
 width: 100%;
 min-width: 600px; /* Adjust as needed */
 border-collapse: collapse;
}

Test your table using HubSpot’s preview in mobile view and also on real devices. Sometimes browser-based previews don’t show the full mobile experience, especially for touch scrolling.

5

amazing thanks so much it is working!!!