CODEWITHSUNDEEP
htmlcss
user3516809
user3516809

Reputation: 21

how to resize words in textbox?

I resized this(id = box1) input textbox but encountered a problem. Initially the textbox resized but later, when i wrote words in it ,it appeared as if not resized.

html:

<div  id="username">
  <form>
    <p>
      <span>UserName:</span>
      <input name="UserName" type="text" size="0" id="box1"   >
    </p>
  </form>
</div>

css :

#username{
position:fixed;
top: 23px;
left: 709px;
right: 10%;
width: 280px;
height: 61px;
font-family: corbel;
border:medium;
border-color:black;
}

Upvotes: 0

Views: 66

Answers (3)

Jon Kyte
Jon Kyte

Reputation: 2020

Target your input and set a font-size using CSS:

#box1 {
  font-size: 20px;
  padding: 5px;
}

You can check this CodePen out to see a working example.

Upvotes: 1

AP_TheMoe
AP_TheMoe

Reputation: 111

You should use:

font-size: 20pt;

for example

Upvotes: 0

user2868232
user2868232

Reputation:

Here is your answer: http://css-tricks.com/viewport-sized-typography/

Use "vw'.

And remember that people won't resize their window. They will load their window in a fixed dimension and there is in some cases landscape and portrait mode. But people won't go re-sizing their screens. It's something you and I do as web-developers to test our shizzle on the screen.

I am using "vw" and it works like a charm.

You can also use fittext.js ---> http://fittextjs.com/ I don't recommend it since you can use "vw", but hey the option is there for you to choose from.

Cheers,

Upvotes: 1

Related Questions