Site Origin Tabs titles do not align

Hello, I am using site origin Tabs widget at the bottom of this page:

for some reason one of the tabs fall under and alings to the left, and breaks the visual balance. Is there a way to customize the titles and arrange them symmetrically?

Hello,

First thanks for using our Sydney theme!

Please try adding the give custom CSS code below at Appearance > Customize > Additional CSS:

@media screen and (min-width: 992px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container .sow-tabs-tab {
		font-size: 13px;
		margin-bottom: 10px;
	}
}

@media screen and (min-width: 1200px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container .sow-tabs-tab {
		font-size: 17px;
	}
}

/* On mobile screens we should center the items */
@media screen and (max-width: 991px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container {
        justify-content: center;
	}
}

@media screen and (max-width: 767px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container {
        align-items: center;
        flex-direction: column;
        text-align: center;
	}
}

We hope this helps!

Let us know if you need further assistance.

Kind Regards,
Rodrigo,
aThemes Support

This worked!! Thanks!

Hello,

Great the issue is now resolved!

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo,

aThemes Support

Hello, it does not work anymore. can you help me understand why is that?

Hello,

Seems that has another code overwriting the CSS we provided for you:
image

Please try changing the code CSS code to:

@media screen and (min-width: 992px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container .sow-tabs-tab {
		font-size: 13px !important;
		margin-bottom: 10px !important;
	}
}

@media screen and (min-width: 1200px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container .sow-tabs-tab {
		font-size: 17px !important;
	}
}

/* On mobile screens we should center the items */
@media screen and (max-width: 991px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container {
        justify-content: center;
	}
}

@media screen and (max-width: 767px) {
	.so-widget-sow-tabs-default-f67f926dc51c .sow-tabs .sow-tabs-tab-container {
        align-items: center;
        flex-direction: column;
        text-align: center;
	}
}

Note the flag !important in the font sizes.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo,

aThemes Support