How to hide a DIV block when the width of the parent block is reduced?

Question

css

The situation is this, the parent DIV (phone number input area) has a width of 100%. The problem is the DIV block (class="mixplat__operators") with the icons of the operator closes the number input field.

You need to hide this block when the size of the parent (class="mixplat__relative") is smaller than
the code:

<div class="mixplat__relative">
  <div class="mixplat__fieldname" style="display: none;">Телефон:</div>
  <div class="mixplat__operators"> </div>
  <input class="mixplat__input m-tel" data-inputmask="'mask': '[phone]'" placeholder="+7 ___ ___-__-__" id="mixplat_phone_input">
</div>

Answer 1

css

@media (max-width: ????) {
    .mixplat__operators {
        display: none;
    }
}

JQUERY
Well, either jQuery instead of $.
And you will find an event on which to hang yourself.

Answer 2

Depending on your needs, here are a couple options...
jquery:
$(document).ready(function(){
var x = $("div.mixplat__relative").width(); // gets the width of the desired block
var y = 200 ; // minimum at which to hide
if(x < y){
$(".mixplat__operators").css("display", "none");
}
});
Or you can use media qveri, the block will climb as I understand it when changing the resolution?:
media screen and (max-width: 480px) {
.mixplat__operators{
display:none;
}
}
example www.w3schools.com/cssref/css3_pr_mediaquery.asp
ps code in haste.. not tested =)

Answer 3

If the width of the parent block changes discretely, then each discrete value must be specified by its own class. Then it will be possible to do this:

.mixplat__relative_compact .mixplat__operators {
  display: none;
}