How to make vertical tab slider responsive for mobile

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

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

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

Hey @Kalie

I came across this forum and I'd really love to implement it onto my website, did you put all the codepen code into a code block? 

What was the format to get this to work? Thanks! 

On 9/8/2023 at 10:44 PM, Gigi-C said:

Hey @Kalie

I came across this forum and I'd really love to implement it onto my website, did you put all the codepen code into a code block? 

What was the format to get this to work? Thanks! 

With Codepen, you can add to Code Block, but need to tweak a bit, use this code

<ul class="main-box">
    <li class="box active"><span>Slide One</span>

        <div class="detail active">
			<p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Two</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Three</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
    <li class="box"><span>Slide Four</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
    </div>
</li>

    <li class="box"><span>Slide Five</span>
        <div class="detail">
           <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
			<p>
			
		   
		   The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
			</p>
        </div>
    </li>
</ul>

<style>
  .main-box
{
    display: flex;
    background: #000;
    margin: 70px auto 70px auto;
    padding:0;
    width: 991px;
}

.box
{

height: 322px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}

.detail
{
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: white;
    color:black;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 70% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
	left:25px;
	right:auto;
	margin:0;
  font-weight:600
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

With this code in screenshot, you need to add it to Custom CSS box

Thank you so much!! This worked a treat!!