Table not responsive on mobile

[laura_kit]

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

[Wesimplifi_ · Accepted solution]

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.

[laura_kit]

amazing thanks so much it is working!!!

[GiantFocal]

Hi @laura_kit,

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

[BérangèreL]

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! 🙌

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! ❤️
Bérangère