Responsive text inside tabs,remove space and round corners

[anitaradovcic]

Hello

How to make text in tabs responsive? https://beta.acpi.tech/savjeti/

How to remove this small space between tabs?

How to make round corners on tabs?

Thank you

[lely]

Hi There,

The text is responsive. The table where you add the text is not. Instead of using tables, please try using Container and Columns shortcode to format content inside tabs.

Try adding this custom CSS:

.x-nav-tabs.left>.x-nav-tabs-item, .x-nav-tabs.right>.x-nav-tabs-item {
    border: none;
}

Which part of those edges you want round corners? See this: https://www.w3schools.com/css/css3_borders.asp

Hope this helps.

[anitaradovcic]

Code doesnt work, there is still white space.

I want round corners like these

I am unable to use container and/or columnes for inserting text with images inside tabs

[paul.r]

Hi,

The code provided above should work. May I know where you have added the code?

You can add it in PRO > Launch > Theme Options > CSS

To make it have round corners, you can add this in the style/inline CSS field of your row element.

border-radius: 10px 10px 0 5px;

Then add this in PRO > Launch > Theme Options > CSS

.x-nav-tabs > li > a {
    font-size: 15px;
    border-radius: 5px 0 0 5px;
}

Hope that helps

[anitaradovcic]

This worked, great! Thank you

[thai]

Glad we were able to help

[anitaradovcic]

Another question, how to allign accordation inside tabs to look like these, to be in the same “row” (this purple color is “accordation”), exactly how to make it to be allign like these.

https://beta.acpi.tech/cesta-pitanja/

[thai]

Hi There,

Please also add this CSS:

.x-tab-content .x-tab-pane {
    padding: 0
}
.x-tab-content p:empty {
    display: none;
}

Let us know how it goes!

[anitaradovcic]

Worked great! Now another question, how to change font to “Roboto” of accordation heading?
Accordation

[jade]

Hi there,

Please try:

.x-accordion-heading .x-accordion-toggle {
    font-family: "Roboto";
}

Hope this helps.