Forum | Appery.io

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

Hello! Could you post screenshot?

Sorry Marina,
I forgot

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

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

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.

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

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 ?

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?

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