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

Make table responsive on mobile


Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

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

image.thumb.png.0b1d266822f0634abb3d09bd5fd5cb1b.png

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, Portfolio hover Replace Link Style
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 post
  • 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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...