Make table responsive on mobile

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. 🙂

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;
      }
}

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"?

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?