Pages

▼

Thursday, 7 September 2017

CSS Media Query

<html>
<head>
<title>@Media Query Girfa</title>
<style>
.container h1
{
     margin-top:15%;
     font-size:4em;
      line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;

     color:#000066;
     text-align:center;
     font-family:Geneva, Arial, Helvetica, sans-serif
    
}
@media(max-width:1000px){
     body{
          background-color:#FFFF00;
     }
}

@media(max-width:1000px){
.container h1 {
     font-size: 3em;
     color:#00FF33;
}
}
@media (max-width: 700px){

.container h1 {
    font-size: 2em;
     color:#FF99FF;
    
}

}
@media (max-width: 700px){
     body{
          background-color:#CCFFFF;
     }
}
</style>
</head>
<body>
<div class="container">
     <h1>
          Girfa Student Help
     </h1>
</div>
</body>

</html>

Add External file with responsive media query

@import url(bootstrap.min.css') only screen and (max-width: 700px);


Add bootstrao.min.css file link when the screen size is less than 700. special in mobile.

at

No comments:

Post a Comment