1

I want to create a form for my front page that has very big elements, so I'm thinking I just define some custom css classes, but I'm struggling with how exactly I'm meant to scale everything up, eg padding, line height, etc. to match font size.

I'm thinking of having a horizontal form with labels and textboxs and submit button having a text size of 72px.

Is there anywhere I can get more information on how to scale everything accordingly or can anyone give me some tips?

What I was trying is:

input.real-large-input {
   font-size: 24px;
   padding: 14px 24px;
   width:270px;
   line-height:46px;
}

label.real-large-label {
   font-size: 24px;
   line-height:46px;
   font-weight:bold;
}

.real-large-btn {
   font-size: 24px;
   padding: 14px 24px;
}

But the line-height and padding are really just kind of made up, I don't know what values to use to keep it all to scale with the original. Actually quite confused by the original bootstrap CSS as it has something like 14px font-size, padding of 4px for top and bottom, but a line-height of 20px, doesn't add up.

The above works sort of fine at these values, but the issue is I want to scale much larger than this but it all gets really messy as I don't know what values I should be putting for padding and line-height when font-size is 72px.

Tesla
  • 793
  • 1
  • 10
  • 22
  • You think somebody will post all the code for you? Atleast post the code of the page you're doing or better in jsfiddle – majorhavoc Aug 26 '13 at 04:53

1 Answers1

3

Bootstrap's inputs have a fixed height, I suggest you set the property to auto to let them scale properly with the font-size you set. Here's a simple demo with a custom class form-large:

http://jsfiddle.net/fpC4r/3/show/

.form-large{
    font-size: 60px;
}

.form-large .control-label{
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: normal;
}

.form-large input, .form-large  button{
    font-size: 60px;
    padding: 20px;
    height: auto;
    line-height: normal;
}
omma2289
  • 54,161
  • 8
  • 64
  • 68
  • the issue I have is with what line-height and padding to be setting to keep everything align and to scale, and do so accross browsers. In your example the label isn't in line with the textbox. – Tesla Aug 26 '13 at 05:28
  • @Tesla well, whatever values you set, you just have to keep them consistent between inputs and labels, see updated fiddle above – omma2289 Aug 26 '13 at 05:40