Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Make table responsive on mobile


3 answers to this question

Recommended Posts

  • 0
21 hours ago, merakiconceptstudio said:

Site URL: https://pend.squarespace.com/services

Password: test

I'd like to keep four columns on mobile, if possible! Happy to make the text very small to facilitate this. All I can find online is CSS for stacking... Any pointers will be much appreciated. 🙂

This simple approach may helps, though if you want it to be more dynamic then javascript is a proper choice

@media only screen and (max-width: 640px) {
      .mytable {
          table-layout: fixed;
          width: 100%;
      .mytable td {
        padding: 2px;
      .mytable tr h4 {
        cursor: pointer;
      .mytable tr h4 + p {
          position: absolute;
          z-index: 9999;
          background: #fff;
          padding: 10px;
          opacity: 0 !important;
          margin-top: -20px;
          transition-delay: 0s !important;
          transition-duration: 0.5s !important;
      .mytable tr h4 {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; 
      .mytable tr h4:hover + p {
          opacity: 1 !important;


Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 5/12/2021 at 2:52 PM, merakiconceptstudio said:

Thank you so much! This is a fantastic solution. Struggling to click the hyperlinks on mobile though—it only works after a few attempts. Any ideas? Could we maybe turn it into a text that says "Tell me more"?

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...