body {
display: flex;
}
#aside1 {
position: fixed
z-index: 101;
max-width: 200px;
overflow: hidden;
}
.aside234 {
margin-left: 400px;
}
-webkit-transition: filter .5s;
-moz-transition: filter .5s;
-o-transition: filter .5s;
transition: filter .5s;
position: absolute;
bottom: 50px;
@mixin borderStyle( $type ) {
border-top-style: $type;
border-right-style: $type;
border-left-style: $type;
border-bottom-style: $type;
}
@mixin borderColor( $color1, $color2, $color3, $color4 ) {
border-top-color: $color1;
border-right-color: $color2;
border-bottom-color: $color3;
border-left-color: $color4;
}
@mixin borderWidth( $top, $right, $bottom, $left ) {
border-top-width: $top;
border-right-width: $right;
border-bottom-width: $bottom;
border-left-width: $left;
}
.b {
@include borderStyle( solid);
@include borderColor( red, pink, black, green);
@include borderWidth(5px, 10px, 20px, 3px);
}
.b2 {
@include borderStyle( dashed );
@include borderColor( green, brown, orange, blue);
@include borderWidth(15px, 30px, 10px, 8px);
}
.box {
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: red;
border-right-color: pink;
border-bottom-color: black;
border-left-color: green;
border-top-width: 5px;
border-right-width: 10px;
border-bottom-width: 20px;
border-left-width: 3px;
}
.box2 {
border-top-style: dashed;
border-right-style: dashed;
border-left-style: dashed;
border-bottom-style: dashed;
border-top-color: green;
border-right-color: brown;
border-bottom-color: orange;
border-left-color: blue;
border-top-width: 15px;
border-right-width: 30px;
border-bottom-width: 10px;
border-left-width: 8px;
}
border-style: solid;
border-width: 0 0 3px 10px; // верх, право, низ, лево
border-color: red black green yellow; // верх, право, низ, лево
<div class="wrapper">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvpxsiRMRqDwDDz98cw93Cm3-8_h6orA-FZJOAfwfTbY9WdtAl" alt="">
<form>
<input type="text">
<input type="text">
</form>
</div>
.wrapper {
display: flex;
}
form {
display: flex;
flex-direction: column;
}
@media screen and (max-width: 600px) {
.wrapper {
flex-direction: column;
}
}
align-self: stretch;
align-items: stretch;
.content_wrapper {
display: flex;
.news {
overflow: auto; // уберите
height: 300px; // уберите
margin-top: 40px; // уберите
<select class="input-md form-control" id="category" name="category">
<option disabled selected id="sel">Что будем крутить?</option>
<option value="11">Услуги Youtube</option>
<option value="12">Услуги Instagram</option>
</select>
function removeQuantity(value) {
console.log(value);
}
$('#category option').on('click', function() {
value = $(this).val();
removeQuantity(value);
});
max-height: 20px;
.mini-short-img {
width: 30vmax;
height: 20vmax;
}
.mini-short-img {
width: 40vw;
height: 20vw;
}
.element img {
vertical-align: bottom; // middle / top - посмотрите по обстоятельствам
margin-top: -2px; // тоже по обстоятельствам.
}
position: fixed;
left: 0;
top: 0;
width: 320px;
height: 100vh
transform: translateX(320px)
#menu img {
width: 45px;
height: 45px;
}