Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • how to use media query to make your page responsive in html?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 423
    Comment on it

    Hello,

    I am sharing an example of html with the use of mediaquery.

    Here in the given example below in which i have used 3 separate files,namely

    1:Html (a file with .html extension)

    2:External css style sheet (a file with .css extension)

    3:Mediaquery css style sheet (a file with .css extension)

    1:Html

    <!DOCTYPE html>
            <html>
            <head>
                <link rel="stylesheet" type="text/css" href="css/samplestyle.css">
                <link rel="stylesheet" type="text/css" href="css/Mediaquery.css">
            </head>
            <body>
            <div class="wrapper">
                <main class="main clr">
                    <div class="col">
                        <h2>Lorem impsum</h2>
                        <p>Lorem ipsum is used as dummy text.</p>
                        <p>Lorem ipsum is used as dummy text.Lorem ipsum is used as dummy
                           text
                       </p>
                    </div>
                    <div class="col">
                      <h2>Lorem ipsum</h2>
                      <p>Lorem ipsum is used as dummy text.</p> 
                      <p>Lorem ipsum is used as dummy text.Lorem ipsum is used as dummy
                         text.
                     </p>
                    </div>
                    <div class="col">
                      <h2>Lorem ipsum</h2>
                      <p>Lorem ipsum is used as dummy text</p>
                      <p>Lorem ipsum is used as dummy text.Lorem ipsum is used as dummy
                         text
                     </p>
                    </div>
                </main>
            </div>
            </body>
            </html>
    

    2:External css style

       .clr::after{
        clear: both;
        display: block;
        content: "";
    }
    *{box-sizing:border-box;}
    .wrapper{
        margin: 0 auto;
        width: 1160px;
    }
    .main{
        width: 100%;
        margin: 0 auto;
    }
    .col {
        border: 1px solid black;
        float: left;
        padding: 15px;
        width: 32.3%;
        margin: 0 5px;
    }
    

    3:Media query file

    @media screen and (max-width: 1160px) { 
            .wrapper{width: 960px;}
            .wrapper div{width:30%;background-color: #FFC0CB;}   
        }
        @media screen and (max-width: 990px) { 
            .wrapper{width: 620px;}
            .wrapper div{width: 48%;background-color: #DF192F;color: #fff;}  
        }
        @media screen and (max-width: 640px) { 
            .wrapper{width: 100%;}
            .wrapper div{width: 90%;background-color: #05AAD8;margin: 0 auto;float: none;}   
        }
    

    Note: For all different browsers different plugins are there which you can use to check how mediaquery works,like for mozilla firefox press ctrl+shift+M to check how media query works.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: