Tabbed content margins and tabs styling

[Anita_Mediana]

Hi,
I’m having some trouble eliminating padding bottom of tabbed content:

Practically I want my image to snap to the bottom of the blue background of the tabbed content.
And the tabs on mobile devices are too big, how can i make them smaller?

This is the page: http://www.mediana.com/en/xsurvey/

Thanks/ Regards,
Anita

[mldarshana]

Hi Anita,

Thanks for writing in! Could you please try adding the following CSS rule into your custom CSS area and see if that helps.

.wpb-js-composer .vc_tta-container {
    margin-bottom: 0;
}

Hope that helps.

[Anita_Mediana]

Hi,
I’ve tried but nothing happens.

Regards,
Anita

[nabeel]

Hey Anita,

Please replace the previous code with the following code:

.wpb-js-composer .vc_tta-container {
    margin-bottom: 0 !important;
}
.vc_tta-panel-body {
    padding-bottom: 0 !important;
}

I see the content is being served by the cache that’s why the changes are not reflected on the front-end. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Anita_Mediana]

OK, that worked, thanks!
Last question: how can I reduce tabbed icon + font only on mobile devices?

Thanks/ Regards,
Anita

[paul.r]

Hi Anita,

To reduce the font size, you can add this in Theme Options > CSS

@media(max-width:767px) {
.wpb-js-composer .vc_tta.vc_general .vc_tta-panel-title {
    font-size: 20px;
}
}

You may change 20px to adjust

Hope that helps.