How do I change my html input field when web browser screen size change?

Question

I have search field in my web page, now I need to change size when web browser screen size change.

let's say initially I have full size of my web browser screen, so it will display based on max-width, now when I reduce the web browser screen size, it will reduce search filed size too, up to min-width. Any Idea How can I do that?, Here what I tried.

.navbar-search input[type="text"]{ font-size: 15px; height: auto; margin-bottom: 05px; max-width: 565px; min-width: 50px; }

Here I found one example, if you reduce the screen size, search filed size also change. this link

Why not try inspecting the stylesheet of the site and see how it is implemented? What have you tried? — Terry
– Terry, Commented Mar 6, 2013 at 17:23
matthewjamestaylor.com/blog/perfect-full-page.htm or maxdesign.com.au/articles/css-layouts — Pamma
– Pamma, Commented Mar 6, 2013 at 17:24
@Pamma I checked that one but didn't workout text field, yes I managed page size — Himanshu Patel
– Himanshu Patel, Commented Mar 6, 2013 at 17:30

Vivek Ghaisas · Accepted Answer · 2013-03-06 18:16:24Z

There are two ways to do this.

One is simply by using percentages instead of hard coded pixels. If you have an input field in a div, you can specify the input field's width to be a percentage of the total width of the div like this:

input { max-width: 200x; width: 80%; min-width: 50px; }

The other way is to use the more complex CSS3 media queries. If you want to use them, a quick google search will help.

Using percentages is always easier, but will not give you the fine control you might need. Choose wisely.

I set max-width: 800px; width: 270%; min-width: 190px; nothing help, BUT max-width: 200x; width: 80%; min-width: 50px; working fine, any idea?
Why are you setting a width of 270%? I think that it throwing it off.
@HimanshuPatel: It makes no sense to set a child element to 270% of the size of a parent element. Generally, child elements are supposed to fit inside their parent. Use percentages smaller than or equal to 100% and you should be fine.

Community · Accepted Answer · 2020-06-20 09:12:55Z

They are doing it with @media queries

CSS:

@media (max-width: 480px){ /* ... */ .header .search-query{width:100px} }

Then they reformat the input width with different @media-queries for different context

@media (max-width: 680px){ /* ... */ .header .search-query{width:150px} }

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012.1 and is a cornerstone technology to Responsive Web Design.

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

what is @media queries? do you have any link for references before jumping code change? basically I don't know about media queries

simanacci · Accepted Answer · 2016-03-03 09:53:35Z

I would say think of other option (instead of div, css and @media) like Twitter bootstrap.

It comes with a responsive css like bootstrap-responsive.css and regarding your question, check this link, you have number of options for form.

You can re size screen size up to cellphone screen but layout is working fine.

illinoistim · Accepted Answer · 2013-03-06 17:24:32Z

1

You need to set a max-width, min-width, and a width that has a percentage, not a set value. (width:75%, not 75px)

answered Mar 6, 2013 at 17:24

illinoistim

44610 silver badges27 bronze badges

2 Comments

Himanshu Patel Over a year ago

I tried width: 270%; max-width: 270%; min-width: 50%;, when I am resizing screen, I am not seeing any effect, can you guide me please?

illinoistim Over a year ago

Sorry if I wasn't clearer, what I meant was to set the width at a percentage and the max and min-width at a set value. See Vivek Ghaisas' answer.

Bbub Mum · Accepted Answer · 2020-10-08 08:20:57Z

Use percentage to width before that you should create container, make sure it overflow, display as block then static.

.card {padding: 20px;} /*create container first*/ .search-container {overflow: hidden; border: 1px solid grey; background: white; display: block ; border-radius: 15px;} .search-container input[type=text] {position: static; border: 1px dotted red; height: 30px; width: 90%; outline: none;} /*you can set border to 'none'*/ /*Adjust width% in last css you like, incase you put icon*/

<div class="card"> <div class="search-container"> <form> <input type="text" maxlength="50" placeholder="Search.." name="search"> </form> </div> </div>

Collectives™ on Stack Overflow

How do I change my html input field when web browser screen size change?

5 Answers 5

3 Comments

2 Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

2 Comments

Comments

Related