.site-branding {
opacity: 0;
transition: .5s;
}
.site-branding.active {
opacity: 1;
}
.site-branding a{
height: 0;
overflow: hidden;
}
.site-branding.active a {
height: auto;
}div{
width: 100px;
height: auto;
overflow: hidden;
}
p{
left: 50px;
position: relative;
}<div ><p>fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef fwefwefwfwefwef</p></div><html>
<head>
<style>
@media (min-width: 768px) and (max-width: 3992px) {
.test{
width: 100%;
background-image: url(http://hdlatestwallpapers.com/wp-content/uploads/2016/10/Colored-Smoke-Backgrounds.jpg);
height: 600px;
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
}
.test1{
width: 300px;
height: 300px;
background-color: #ff0000;
margin: 0 auto;
position: relative;
top: 150px;
}
}
</style>
</head>
<body>
<div class="test">
<div class="test1">
</div>
</div>
</body>
</html><link rel="stylesheet" media="screen and (min-width: 1000px)" href="=/style.css" /> все что больше 1000рх
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="=/style.css" /> все что меньше 1000рх
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 900px)" href="/style.css" /> в промежутке от 600рх до 900рх