Jump to content

How to make vertical tab slider responsive for mobile

Recommended Posts

I built a vertical tab slider using a code block, but can't seem to get the formatting right for mobile. I'm still a newbie when it comes to CSS/HTML so I'm feeling a bit stuck.

Is there a way to...

  • Make the tabs horizontal in mobile view?
  • Format the height/width of the block for better responsiveness?
  • Or, another way to display them for better visibility?

Code: https://codepen.io/skkhan/pen/MWWdXbb

Goal: https://www.squarestylist.com/shop/vertical-tabs

Edited by Kalie
Link to comment

Try adding to Design > Custom CSS

/* Vertical Timeline CSS Mobile */
@media screen and (max-width:767px) {
	li.box, ul.main-box .box.active {
    width: 100% !important;
    overflow: visible !important;
}

.box span {
    writing-mode: initial !important;
    width: 100% !important;
    transform: unset !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.box.active .detail {position: relative !important;}
	ul.main-box {
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Thanks, tuanphan! I appreciate you taking a look at this.

It stacked the tabs horizontally (which is great), but the layout was off and the tabs weren't expanding/retracting properly. The CSS you provided was really helpful, though! Because of it, I was able to come up with a workaround.

Here's what I used:

//Tab Slider Mobile
@media (max-width: 620px) {
  .main-box {
    flex-direction: column;
    width: 100% !important;
    .box {
      width: auto !important;
      height: auto !important;
      span {
        writing-mode: unset !important;
        transform: unset !important;
        position: relative !important;
        width: auto !important;
        left: unset !important;
        height: auto !important;
      }
      .detail {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        display: none !important;
        margin-top: 14px;
      }
      &.active {
        width: auto !important;
        .detail {
          display: block !important;
        }
      }
    }
  }
}
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.