CODEWITHSUNDEEP
htmlcss
Manoz
Manoz

Reputation: 6617

max min width in css

I have following input boxes.

enter image description here

I reduced their width to align them in-line and it looks good in full sized window,Now problem occurs when i do narrow screen.

It looks really bad while doing narrow screen.

A look-

enter image description here

I tried these input boxes to get a new line with setting up max-width.

In code-

I am using input as-

For price Ex. Vat-

  <input type="text" style="width:85%;max-width:85%;" id="Order" maxlength = "10" name="PriceExVat"   onkeypress="validate(event)"/>

But it doesn't get a new line while doing narrow screen.

I want this desired responsive layout for these input blocks-

enter image description here

Upvotes: 1

Views: 9759

Answers (3)

user2218109
user2218109

Reputation:

I think you have added display: inline; try display: inline-block; this may solve the problem.

Upvotes: 1

rktcool
rktcool

Reputation: 356

You are almost there. You must use min-width for preventing elements from shrinking after a particular width.

Replace max-width with min-width in your-code and try again. Also you might want to specify max-width: nPixels px; to prevent the text-boxes from occupying 85% width when on full screen.

Upvotes: 1

svineet
svineet

Reputation: 1889

Do a media query and make them block elements - 

@media all and (max-width: 500px) and (min-width: 0px) {
 input[type="text"] {
  display:block;
 }
}

Upvotes: 8

Related Questions