asked on

proper way to set height of a button for mobile device

HI,
I have the following html :

 <div id="buttons">
        <button id="submit" disabled>Note</button>
        <button id="cancel">Cancel</button>
      </div>

Open in new window

I wanted to increase the rendered height for this button so on mobile specific css i added line-height: 2em :

#buttons :first-child {
    float: none;
    width: 50%;
    line-height: 2em;
}

Open in new window

The only new property i added fro mobile is the line-height.
Although buttons do appear properly now and bigger on mobile device. Is this correct way to do this ?
I read that using em is good as it automatically takes care of mobile devices.

Is there any better way to achieve the same ?
thanks

ASKER CERTIFIED SOLUTION

Francisco Igor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rohit Bajaj

ASKER

HI,
Just to be exact what i am doing i have the following styling on buttons :

#buttons {
    margin-top: 18px;
    overflow: hidden;
}

#buttons :first-child {
    float: right;
}

#buttons :nth-child(2) {
    margin-right: 15px;
    float: right;
    padding: 10px 25px;
}

button  {
    background: rgba(10, 190, 81, 1);
    padding: 10px 25px;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    outline: none;
}

button:disabled {
    background: rgba(10, 190, 81, 0.5);
    cursor: default;
}

Open in new window

In my case i dont have the font property set..so can i still use line-height property ?

Also if i specify font-size and line-height....even then i am telling the mobile browser to render the button as 20 px..height
which may not be appropriate for different mobile devices as some may have high resolution and some may have low resolution...

Is there any standard way to make sure that things work well on all mobile devices ? and desktop too

Francisco Igor

But if you need a simple way to adapt a button to different resolutions, using line-height in em units it's a good choice. If you dont specify font-size, the default or inherited font size is used, and the size of button will be calculated using this size. So, if the device font is small, the button will be small. Larger resolutions will show a small button if the font size is small.

Another way to work with different resolutions is using css media queries and adapting css properties to a different device sizes:

@media (min-width: 1600px) {
  .btn {
     font-size: 20px;
  }
}

Open in new window

The previous css example is for the default configuration. There is additional variations for distinct button classes and different font-size to match different levels of text (large, small, xsmall).

.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

Open in new window