Как скрыть блок DIV при уменьшении ширины родительского блока?

Question

[Александр]

Ситуация такая, родительский DIV (область ввода номера телефона) имеет ширину 100%. Проблема - блок DIV (class="mixplat__operators") с иконками оператора связи закрывает поле ввода номера

Надо скрыть этот блок когда размер родителя (class="mixplat__relative") меньше

код:

<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

($('.mixplat__relative').width() > 300) ? $('.mixplat__operators').hide() : $('.mixplat__operators').show()

Ну либо jQuery вместо $.
И событие на которое вешать сам уж найдешь.

Comments

[Александр]

Кирилл Ушаков так ведь media это размер окна браузера... а браузер то разрешение не меняет, меняется ширина блока

[Кирилл Ушаков]

Каким способом меняется ширина блока без изменений размера окна?

[Александр]

Кирилл Ушаков: за счет изменения размера более высшего блока div. Проще говоря на сайте есть несколько сайдбаров разной ширины

[Александр]

Кирилл Ушаков: для наглядности, вот страница fondsemenenko.ru/news

[Ankhena]

Александр: А размер следующего блока за счет чего меняется без изменения размера окна? :)
Посчитать-то Вы можете начиная с какого размера окна браузера начинается кривизна?
Хоть импирическим путем, ведете мышкой за край и следите за расположением. Видите, что все поехало, запомнили число, вписали в media.

Answer 2

[ipokos]

В зависимости от задач, вот пара вариантов...
jquery:
$(document).ready(function(){
var x = $("div.mixplat__relative").width(); // получает ширину нужного блока
var y = 200; // минимум при котором скрывать
if(x < y){
$(".mixplat__operators").css("display", "none");
}
});
Или можно использовать медиа квери, блок залазит как я понял при смене разрешения?:
media screen and (max-width: 480px) {
.mixplat__operators{
display:none;
}
}
пример www.w3schools.com/cssref/css3_pr_mediaquery.asp
p.s. код на скорую руку.. не тестил =)

Comments

[Александр]

ipokos что-то не срабатывает решение jquery.. Нет, блок залазит при изменении размера прородительского блока. Вот на этой странице можно глянуть fondsemenenko.ru/news

[ipokos]

Ахаах... это бюджетное сео продвижение, задавать фейковые вопросы, что б хоть кто то на страницу зашел?)?!

[Александр]

ipokos: на самом деле нет, действительно стоит передо мной задачка ))

Answer 3

[Кот Учёный]

Если ширина родительского блока изменяется дискретно, то каждое дискретное значение должно задаваться своим классом. Тогда можно будет сделать так:

.mixplat__relative_compact .mixplat__operators {
  display: none;
}