@media (max-width: 767px) {
.header_burger {
display: block;
position: relative;
flex: 0 0 30px;
height: 20px;
}
....
.header_burger:before,
.header_burger:after {
countent: "";
background-color: black;
position: absolute;
width: 100%;
height: 3px;
left: 0;
}
<div class="apartment-search-result" v-for="(item, index) in filtredItems" :key="`apart_${item.id}`">
data() {
return {
...
inStock: false,
...
};
},
...
computed: {
filtredItems() {
if (this.inStock) {
return this.items.filter(ite => item.status === 'inStock');
}
},
},
...
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial;
}
.wrapper{
display: table;
width: 100%;
background: #f7f7f7;
}
.wrapper::before{
content: '';
height: 100%;
vertical-align: middle;
}
.test1, .test2, .test3{
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 50px;
color: #fff;
padding: 0px 10px 0px 10px;
border-radius: 10px;
}
.test1, .test3{
width: 100px;
height: 50px;
background: orange;
}
.test2{
background: red;
height: 40px;
line-height: 40px;
}
function out() {
let input = document.querySelector('.input').value;
let result = document.querySelector('.out');
let name = {};
name.todo = input;
name.check = false;
let j = heaList.length;
heaList[j] = name;
let out = '', res = '';
for (let key in todoList) {
res += heaList[key].todo + '<br>';
res += todoList[key].todo + '<br>';
}
result.innerHTML = '<span>' + res + '</span><br>';
}