function to change my . css if the width of the sole is "X"

Question

Hello. I’m in the learning phase. Trying to create a responsive website. I need a . js or .css. script so that when this width in the code (css) is true, run the code. in css.

(I thank you give of any collaboration, knowledge is never d+)

<!-- language: lang-css -->

@media only screen and (max-width: 769px) {
}

$("#input-search").on("focus", function(){

	$("#input-search").css({"width": "120px"});
  
	}).on("blur", function(){

		$("#input-search").css({"width": "80px"});	
    
});

<li class="search">
<div class="input-group">
<input type="search" placeholder="search" id="input-search" style="width: 80px">
 </div>
 </li>

Answer 1

Hello, you don’t need a JS script to make your site responsive, this is possible only with CSS. One of the best ways is to use CSS media queries.

@media(min-width: 768px) {
   body {
     background-color: red;
  }
 }

The above code makes the page have a red background on screens with at least 768px. This article can help you Introduction about Media Queries, read on.

Answer 2

Look, your question is a little confusing, but I think I get it, you want to increase the size of the input, according to the client’s viewport(screen).

If that’s what you mean, here’s the deal.

css does it for you with the popular media querie, since you want to give "responsividade ao layout", I imagine you didn’t try, was to put the code inside it, that way:

@media only screen and (max-width: 769px) {  
  #input-search{
    width: 120px !important;
  }
}

<li class="search">
<div class="input-group">
<input type="search" placeholder="search" id="input-search" style="width: 80px">
 </div>
 </li>

In this case specifically, as you are putting a style in-line de 80px, the only way to overwrite css and with !important;, which I would advise from now on to AVOID AS MUCH use it.

you can also control the input Focus, using

#input-search{
  width: 80px
}
  
#input-search:focus{
   width: 120px;
}

<li class="search">
<div class="input-group">
<input type="search" placeholder="search" id="input-search">
 </div>
 </li>

Avoiding the use of JS in this case.

I hope I’ve helped you.

Hugs.