themeroller header buttons too big

[Michael4771079]

Hi,
here is a screen shot of themeroller header, the header button is to big, I need to make the button smaller so it more like apple, I don't wish to make the header bigger

[Maryna Brodina]

Hello! Could you post screenshot?

[Michael4771079]

Sorry Marina,
I forgot

[Maryna Brodina]

Thank you! Please try to correct it using next CSS:

.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner {
font-size: 12.5px;
padding: .55em 11px .5em;
}

If it won't work then try changing padding values in CSS

[Michael4771079]

Hi Marina,
the code above didn't work
I found this code after,
it works, but I have a double image

do you know how to get rid of this

code.ui-header .ui-btn, .ui-header .ui-icon, .ui-header .ui-btn-inner {
width: 70px;
height: 25px;
}
//.ui-header .ui-btn-inner .ui-icon{
margin: 0px;
border-radius: 0;
}
.ui-header {
height: 35px;/code

[Kateryna Grynko]

Hi Michael,

To prevent doubling images add to your CSS next rule:
code.ui-header .ui-btn-inner {
padding: 0;
}/code
Button icons will be invisible because you fixed button width = 70 px in your CSS. Instead of CSS you use, you can try next one:
code.ui-header .ui-btn-inner {
padding: .25em 11px .25em;
}/code
Header buttons will have the same height, and the width will depend on text length and existing icon on the button.

[Michael4771079]

Thank you Katya,
Thats a great solution, works perfectly!

[EJLD]

Hi there, here after is a screenshot of my android 4.4.2
you'll see the button at the right of the header messes up the txt.
any idea ?

[Evgene Karachevtsev]

Hello Eric,

Could you please clarify, is this button displayed correctly in the test mode in a browser? Have you applied any css rules to it?

[EJLD]

thks for your quick response.
it shows up well in the browser's test viewer, there is no CSS rule.
it's also fine on iOS and Android 4.4.4.
it's only on the Android 4.4.2 of my Note3 that it doesn't work properly.
any idea ?
thks