CODEWITHSUNDEEP
htmlcss
Himanshu Patel
Himanshu Patel

Reputation: 173

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

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

Upvotes: 1

Views: 11643

Answers (5)

Bbub Mum
Bbub Mum

Reputation: 11

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>

Upvotes: 1

AMIC MING
AMIC MING

Reputation: 6354

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.

Upvotes: 1

Milche Patern
Milche Patern

Reputation: 20452

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.

Upvotes: 4

Vivek Ghaisas
Vivek Ghaisas

Reputation: 971

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.

Upvotes: 5

illinoistim
illinoistim

Reputation: 446

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

Upvotes: 1

Related Questions