Media Query

by matmat

HTML

<div id="content-2" style="margin-top:2%;">
    <div id="Relations" style="">aa</div>
    <div id="superglobal">
        <div id="Sponsor">aa</div>
        <div id="Maincontent">
            <div class="maintitle h40">
                <div class="wrapper1">
                    <div class="helper"></div>
                    <div class="imgcontent70">
                        <img src="/_images/jsfiddle-logo-thumb.png" />
                    </div>
                    <div class="contentmaintitle">titre<span class="cOR">.com</span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html {
    background:whitesmoke;
    font-size:100%;
}
#Relations {
   width:22%;
    float:left;
box-sizing: border-box;
text-align:left;
}
#Sponsor {
width: 22%;
float: right;
box-sizing: border-box;
}

#Maincontent {
position:relative;
float: right;
width: 54%;
box-sizing: border-box;
text-align:left;
}


#content-2{

margin:auto;
}
.maintitle {
    background:whitesmoke;
    box-sizing:border-box;
    border-bottom:1px solid gainsboro;
    position:relative;
    font-size:1.2rem;
    font-family:'century gothic';
}
.wrapper1 {
    width:85%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}
.helper {
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.imgcontent70, .contentmaintitle {
    display:inline-block;
    vertical-align:middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contentmaintitle {
    margin-left:2%;
    color:#808080;
    /*line-height:100%;*/
}
.contentmaintitle {
    font-size:1.1rem;
}
.h40 {
    height:40px;
}
@media screen and (min-width:1880px) {
    html {
        font-size:100%;
    }
    	.h40 {
	height:50px;
	}
}
@media screen and (max-width:1535px) and (min-width:1365px)  {
	html{
	font-size:88.9%;
	}
       h40 {
	height:35.6px;
	}
}
@media screen and (max-width:799px) {
	html{
	font-size:37%;
	}
    	.h40 {
	height:14.8px;
	}
}
@media screen and (max-width:1365px) and (min-width:1151px)  {
	html{
	font-size:75%;
	}
    	.h40 {
	height:30px;
	}
}

@media screen and (max-width:1151px) and (min-width:1023px)  {
	html{
	font-size:66.7%;
	}
    .h40 {
	height:26.7px;
	}
    @media screen and (max-width:1023px) and (min-width:799px)  {
	html{
	font-size:52.1%;
	}
     	.h40 {
	height:20.8px;
	}   
    }
}