HOW TO BREAK TAB HEADER TITLE TEXT INTO 3 LINES

Hello @deduice,
Hope you are doing well.

I can understand your queries. Please find the answer to those below-

1. We haven’t included the control for breaking the Tab Title in multiple lines yet in the Tab widget. But, you will be able to achieve what you are looking for by applying some CSS codes. Please copy the CSS code from below and paste it to the Appearance > Customize > Additional CSS section.

@media (min-width: 768px){
.elementkit-tab-wraper:not(.vertical)>ul>li>a {
    white-space: normal !important;
    max-width: 18.4rem;
    text-align: left;
    }
}

let me know if that helps!

2. The feature of making the Tabs Horizontally Scrollable while accessing it from Mobile is currently not available in the Elementskit plugin. But thanks for letting us know about this feature. We are continuously working on improving our plugin by adding more new features according to our customers’ needs. Please add this as a feature request section. The Link to our Feature request is included on the USEFUL LINKS section of the Plugin Details Page.

Let me know if there is anything else that you need help with.

Best Regards,
Prosenjit

Thank you for this. It worked but the text isn’t aligning to the left side – is still centered. I want it aligned to the left side of the screen.

On mobile view, can I also have the Tab Title broken in multiple lines as we have on the Desktop view?

Thank you

Hello @deduice,
Hope you are doing well.

I have missed including the important rule beside the Text Alignment. Please remove the previous CSS and include the CSS mentioned below.

@media (min-width: 768px){
.elementkit-tab-wraper:not(.vertical)>ul>li>a {
    white-space: normal !important;
    max-width: 18.4rem;
    text-align: left !Important;
    }
}

It will make the text aligned to left and break the single line into 3 lines.

In order to display the break on mobile also, Please use the CSS mentioned below.

@media (max-width: 768px){
    .elementkit-tab-wraper:not(.vertical)>ul>li>a {
        padding-left: 65px !important;
        padding-right: 65px !important;
        text-align: left !important;
    }
}

I hope it will help. Let me know if you need further assistance. I will be happy to assist you.

Best Regards,
Prosenjit

Thank you for your help. It worked perfectly for the Desktop and Mobile view, but it’s not breaking into three lines on the Tablet view. It’s on a Straight line on Tablet view.

Kindly help.

Thanks as always.

Hello @deduice,
Hope you are doing well.

I have tested your site from a tablet Device(iPad) and the line break shows perfectly there. Since we have defined the Min-width as 768px, which is the standard resolution for Tablet Devices, it should work properly. For better understanding, please check this screenshot.

Maybe you should try clearing the caches from your site and browser of that tablet device. Hopefully, you will not face any problems after that.

Best Regards,
Prosenjit

Hi @prosenjitbarman
Thank you. I understood.

See image for reference > https://imgur.com/0TYNJ9o

I’m facing a new issue. On the left image, if you click on the tab, the underline red line stays on the grey line. While on the right image, if you click on the tab, the underline red line move above the line and stay close the title text.

The question is: how do i keep the underline red line stay on the grey line regardless of the text height of the title text?

Cheers

• This reply was modified 2 years, 11 months ago by deduice.

Hello @deduice,
Hope you are doing well.

This issue can be solved by applying a fixed height for the Title of the Third tab. I have included the CSS that will fix the gap between Red Underline and Grey border. Please copy that CSS from below and paste it to Appearance > Customize > Additional CSS section.

@media (min-width: 768px){
li:nth-child(3) span.elementskit-tab-title {
    height: 56px !important;
}
}

Let me know if that helps!

Best Regards,
Prosenjit

Hello, @prosenjitbarman

Thank you once again.

Question 1:
Another issue came up after using the code, it affected another item/tab 3 on this Tab section on the site. Please see the page/section here > https://webdev-projects.com/armanvestad/tab-designs/. The section is the one below the first one.
I deleted the code from WordPress Additional CSS Customizer section and pasted inside
Elementor CSS section, the same issue happened.

Question 2:
On Tablet view, the Tab items are not responsive. they need to be inline like that of the Desktop view. See screenshot > https://imgur.com/2WrV2Rz

Question 3
Is there a way i can have the length of the underline red line to fit within the width of the title text rather stretching beyond both ends of the text?

See image for context: https://imgur.com/yALufok

Thank you in advance

• This reply was modified 2 years, 11 months ago by deduice.

Hello @deduice
Sorry for any inconvenience. Please find the answer to the questions below-

1. Somehow, I have missed the second Tab you have used. Sorry for that. This problem can be solved easily by applying the CSS code mentioned below.

@media (min-width: 768px){
.elementor-element-3bd4797 li:nth-child(3) span.elementskit-tab-title {
    height: 56px !important;
}
}

The CSS will solve the problem. But, it will be better if you can apply a Custom Class to the tab and use that Class replacing the class mentioned in CSS above, named .elementor-element-3bd4797. You can check this video to understand the process.

2. The Last item of Tab is showing separately due to assigning a large amount of Padding. Please reduce the Right Margin of that Tab Items according to this video. I hope the issue will be solved right after that.

3. The Underline Appears for Active Tab is set to take the width of the Entire Tab Item by default. But, by tweaking the style controllers, you will be able to achieve what you are looking for. Please check out this video to understand the process.

Let me know if there is anything else that you need help with.

Best Regards,
Prosenjit

Hello @prosenjitbarman.
Happy New Year to you.
Thanks once again for your helpful answers.

On Question 1, the issue is still present.
Is there a way to keep the underline red line to stay on the grey line dynamically without the need to alter the CSS code? Reason because we will be updating the tab content every now then and it wont be a wise thing to ask one’s client to edit the code. If there’s a way this can work dynamically i will appreciate.
You can check the Tab to see the updated content and how it affects the each tabs > https://webdev-projects.com/armanvestad/tab-designs/

=====

On Elementor Tablet view 768 x 560, the Tab items are not responsive maybe because of the spacing between the tabs. How do i reduce the spacing? See screenshot here> https://imgur.com/GpZCoJf. Here is the link to the page > https://webdev-projects.com/armanvestad/tab-designs/. It’s the one below the first tab

Cheers