Kalie Posted April 1 Share Posted April 1 (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 by Kalie Link to comment
tuanphan Posted April 5 Share Posted April 5 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
Kalie Posted April 17 Author Share Posted April 17 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment