Kalie Posted April 1, 2023 Share Posted April 1, 2023 (edited) 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 April 17, 2023 by Kalie Link to comment
tuanphan Posted April 5, 2023 Share Posted April 5, 2023 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Kalie Posted April 17, 2023 Author Share Posted April 17, 2023 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; } } } } } tuanphan 1 Link to comment
Gigi-C Posted September 8, 2023 Share Posted September 8, 2023 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! Link to comment
tuanphan Posted September 12, 2023 Share Posted September 12, 2023 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 Gigi-C 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Gigi-C Posted September 13, 2023 Share Posted September 13, 2023 Thank you so much!! This worked a treat!! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment