🚀 Interactive CSS Basics course for designers and non-coders: www.cssgamelab.com/ 👉 Get 20% off using the code VELVET20OFF at Checkout. 💻 Grab the CSS code for free here: www.cssgamelab.com/2024/11/28/css-codes-for-wordpress-tutorials/
The selectors have changed and I can't get it to work. I can't find wrapper anymore, I am wondering if this is because of flexbox being added to elementor. It seems they should have this option in the settings but it still arranges the tabs in this way I guess they call it "accordion" not sure what the use is of having tabs work in this way...
🚀 Interactive CSS Basics course for designers and non-coders:
www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
💻 Grab the CSS code for free here:
www.cssgamelab.com/2024/11/28/css-codes-for-wordpress-tutorials/
Thank you! This really worked nicely. My tab names were mostly 2 worded - so it lay them horizontally on top, nicely!
You are welcome, so glad it worked for you! :)
Thank you for this tutorial , it was really helpful
You're welcome, I am glad it helped! :) If you have any suggestions on what you would like to see next, just let me know :)
Thank you that was very useful.
Can you please tell me how can I fixed the tab on top, when content scrolling in mobile?
The selectors have changed and I can't get it to work. I can't find wrapper anymore, I am wondering if this is because of flexbox being added to elementor. It seems they should have this option in the settings but it still arranges the tabs in this way I guess they call it "accordion" not sure what the use is of having tabs work in this way...
You should try this:
@media (max-width: 767px) {
.e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
display: flex;
flex-wrap: wrap !important;}
.elementor-widget-n-tabs .e-n-tabs-content .e-collapse.e-active {
display: none;
}
.elementor-widget-n-tabs .e-n-tabs-content .e-collapse:not(:first-child) {
display: none;
}
div.e-collapse:nth-child(1){display: none !important;}
#tabs-services {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
width: auto;
}
#tabs-services .tab-title {
width: auto;
flex: 0 0 auto;
}
.e-n-tab-title {
flex-shrink: 0;
max-width: 150px;
flex-basis: auto;
}
}
thank you very much! I only had two tabs and this worked perfectly!
Great, glad it worked! :)
its possible to customers elementor progress bar to be Semicircle
can we have the css what did you write
Grab the CSS code here:
www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/
@@cssexpresstutorials thank you so much
@@cssexpresstutorials Worked. Thank you.
@@lblockst You're welcome!
@@cssexpresstutorials thank you so much i want this to long timessss
thanks alot !!!!!!!!
You're welcome! :)
good content Thank you
You're welcome! :)
GREAT
Thanks for watching!
Why not just have them swipe on mobile?
How would you do that - it could be interesting?!
so coooolllllllllllll
Glad you liked it! :)