Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to do styling of a page header layout to fit in tablet & smart phones?

    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 39
    Answer it

    I have this page header and i need to make responsive so it can fit in tablet and smart phones and i need to direct form right to left and how can i use pure javascript to achive that (no Jquery needed) 

     

    <!DOCTYPE html>
    
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js">
    <!--<![endif]-->
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Arabic HTML responsive grid</title>
        <meta name="viewport " content="width=device-width">
    
        <!--  favicon.ico -->
    
        <link rel="stylesheet" href="bootstrap.css">
        <link rel="stylesheet" href="bootstrap-grid.css">
        <link rel="stylesheet" href="bootstrap-reboot.css">
        <link rel="stylesheet" href="css/style.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <script src=" http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js "></script>
        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
        <style>
            body {
                background-color: #d1d1d1;
                direction: rtl;
            }
            
            .header {
                border: #222 double;
                width: 100%;
                display: inline-table;
                height: 20px;
                min-width: 980px;
                background-color: #4c4e5a;
            }
            
            .header .div1 {
                *background-color: skyblue;
                width: 25%;
                float: right;
            }
            
            .div2 {
                *background-color: burlywood;
                width: 50%;
                float: right;
                margin: 0 auto;
            }
            
            .div2,
            .div2 ul,
            .div2 li,
            .div2 a {
                margin: 0;
                padding: 0;
                border: none;
                outline: none;
            }
            
            .div2 ul {
                height: 40px;
                width: 505px;
                margin: 5px auto;
                background: #4c4e5a;
                background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }
            
            .div2 li {
                position: relative;
                list-style: none;
                float: right;
                display: block;
                height: 40px;
            }
            
            .div2 li a {
                display: block;
                padding: 0 14px;
                margin: 6px 0;
                line-height: 28px;
                text-decoration: none;
                border-left: 1px solid #393942;
                border-right: 1px solid #4f5058;
                font-family: Helvetica, Arial, sans-serif;
                font-weight: normal;
                font-size: 18px;
                color: #f3f3f3;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
                -webkit-transition: color .2s ease-in-out;
                -moz-transition: color .2s ease-in-out;
                -o-transition: color .2s ease-in-out;
                -ms-transition: color .2s ease-in-out;
                transition: color .2s ease-in-out;
            }
            
            .div2 li:first-child a {
                border-left: none;
            }
            
            .div2 li:last-child a {
                border-right: none;
            }
            
            .div2 li:hover>a {
                color: #8fde62;
            }
            
            .div3 {
                *background-color: gainsboro;
                width: 25%;
                float: left;
            }
            
            .div3 .dropdown {
                margin-top: 15px;
            }
            /* DropDown */
            
            .dropdown {
                color: #555;
                margin: 3px -22px 0 0;
                width: 143px;
                position: relative;
                height: 17px;
                text-align: left;
            }
            
            .submenu {
                position: absolute;
                z-index: 100;
                width: 135px;
                display: none;
                margin-left: 10px;
                padding: 40px 0 5px;
                border-radius: 6px;
            }
            
            .dropdown li a {
                color: #555555;
                display: block;
                font-family: arial;
                font-weight: bold;
                padding: 6px 15px;
                cursor: pointer;
                text-decoration: none;
            }
            
            .dropdown li a:hover {
                background: #155FB0;
                color: #FFFFFF;
                text-decoration: none;
            }
            
            a.account {
                font-size: 18px;
                line-height: 16px;
                color: #fff;
                position: absolute;
                z-index: 110;
                display: block;
                padding: 11px 0 0 20px;
                height: 28px;
                width: 150px;
                margin: -11px 0 0 -10px;
                text-decoration: none;
                background: url(images/arrow.png) 80px 32px no-repeat;
                cursor: pointer;
            }
            
            .root {
                list-style: none;
                font-size: 11px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
                background: #fff;
                padding: 10px 0 10px 0;
                border-radius: 5px 5px 5px 5px;
                margin: 21px 0 0 0;
            }
            
            .root:before {
                content: '';
                display: inline-block;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 7px solid #ccc;
                border-bottom-color: #ffffff;
                position: absolute;
                color: #ffffff;
                top: 54px;
                right: 17px;
            }
            /* DropDown */
        </style>
        <script>
            $(document).ready(function()
    
                {
    
                    $(".account").click(function()
    
                        {
    
                            var X = $(this).attr('id');
    
                            if (X == 1)
    
                            {
    
                                $(".submenu").hide();
    
                                $(this).attr('id', '0');
    
                            } else
    
                            {
    
                                $(".submenu").show();
    
                                $(this).attr('id', '1');
    
                            }
    
                        });
    
                    $(".submenu").mouseup(function()
    
                        {
    
                            return false
    
                        });
    
                    $(".account").mouseup(function()
    
                        {
    
                            return false
    
                        });
    
                    $(document).mouseup(function()
    
                        {
    
                            $(".submenu").hide();
    
                            $(".account").attr('id', '');
    
                        });
    
                });
        </script>
    </head>
    
    <body>
    
    
        <div class="header">
    
    
            <div class="div1">
                <a href="" class="navbar-brand"><img src="website-logo.png" alt="" height="30"></a>
            </div>
    
            <div class="div2">
    
                <ul>
    
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#">  </a>
                    </li>
                    <li>
                        <a href="#">  </a>
                    </li>
                    <li>
                        <a href="#"> </a>
                    </li>
                </ul>
    
            </div>
            <div class="div3">
    
                <div class="dropdown">
    
                    <a href="#" class="account" id="account"> </a>
    
                    <div class="submenu" style="display: none; " id="submenu">
    
                        <ul class="root">
    
                            <li><a href="#">Dashboard</a></li>
    
                            <li><a href="#">Profile</a></li>
    
                            <li><a href="#">Settings</a></li>
    
                            <li><a href="#">Sign Out</a></li>
    
                        </ul>
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
        <div class="container">
    
            <div class="row justify-content-center mt-5">
    
    
    
                <div class=" col-xl-5 col-md-6 col-xs-12 col-sm-12 col-12 bg-default ">
    
                    <div class="card ">
    
                        <div class="card-block pt-3">
    
                            <h2 class="card-title text-center"> </h2>
                            <p class="card-text text-center text-muted"><small>Please fill out all the fields</small></p>
                            <form action="" method="">
    
                                <fieldset class="form-group">
                                    <label for="username"> </label>
                                    <input type="text" class="form-control" />
                                </fieldset>
                                <fieldset class="form-group">
                                    <label for="username"> </label>
                                    <input type="text" class="form-control" />
                                </fieldset>
    
                                <div class="checkbox">
    
                                    <label for="">
                                               <input type="checkbox">
                                        </label>
    
                                </div>
    
                                <div>
                                    <a href="#">   </a>
    
                                </div>
    
                                <div>
                                    <button class="btn btn-block btn-success"> </button>
                                </div>
    
                            </form>
                        </div>
                        <div class="card-footer text-muted text-center">
                            <p> </p>
                            <a href=""> </a>
                        </div>
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    
    
        <script src="jquery-1.8.2.min.js"></script>
    </body>
    
    </html>

     

 1 Answer(s)

  • Make below change in your CSS, I hope this will work for you, which you want to achieve.
     
            <style>
                body {
                    background-color: #d1d1d1;
                    direction: rtl;
                }
                
                .header {
                    border: #222 double;
                    /*width: 100%;
                    display: inline-table;
                    height: 20px;
                    min-width: 980px;*/
                    background-color: #4c4e5a;
                }
                .header::after{
                    clear: both;
                    content: "";
                    display: block;
                }
                
                .header .div1 {
                    *background-color: skyblue;
                    width: 25%;
                    float: right;
                    /*float: left;*/
                }
                
                .div2 {
                    *background-color: burlywood;
                    width: 50%;
                    float: right;
                    margin: 0 auto;
                    /*float: left;*/
                }
                
                .div2,
                .div2 ul,
                .div2 li,
                .div2 a {
                    margin: 0;
                    padding: 0;
                    border: none;
                    outline: none;
                }
                
                .div2 ul {
                    height: 40px;
                    /*width: 505px;*/
                    margin: 5px auto;
                    background: #4c4e5a;
                    background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                    background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                    background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                    background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                    background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                }
                
                .div2 li {
                    position: relative;
                    list-style: none;
                    float: right;
                    display: block;
                    height: 40px;
                }
                
                .div2 li a {
                    display: block;
                    padding: 0 14px;
                    margin: 6px 0;
                    line-height: 28px;
                    text-decoration: none;
                    border-left: 1px solid #393942;
                    border-right: 1px solid #4f5058;
                    font-family: Helvetica, Arial, sans-serif;
                    font-weight: normal;
                    font-size: 18px;
                    color: #f3f3f3;
                    text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
                    -webkit-transition: color .2s ease-in-out;
                    -moz-transition: color .2s ease-in-out;
                    -o-transition: color .2s ease-in-out;
                    -ms-transition: color .2s ease-in-out;
                    transition: color .2s ease-in-out;
                }
                
                .div2 li:first-child a {
                    border-left: none;
                }
                
                .div2 li:last-child a {
                    border-right: none;
                }
                
                .div2 li:hover>a {
                    color: #8fde62;
                }
                
                .div3 {
                    *background-color: gainsboro;
                    width: 25%;
                    float: left;
                }
                
                .div3 .dropdown {
                    margin-top: 15px;
                }
                /* DropDown */
                
                .dropdown {
                    color: #555;
                    margin: 3px -22px 0 0;
                    width: 143px;
                    position: relative;
                    height: 17px;
                    text-align: left;
                }
                
                .submenu {
                    position: absolute;
                    z-index: 100;
                    width: 135px;
                    display: none;
                    margin-left: 10px;
                    padding: 40px 0 5px;
                    border-radius: 6px;
                }
                
                .dropdown li a {
                    color: #555555;
                    display: block;
                    font-family: arial;
                    font-weight: bold;
                    padding: 6px 15px;
                    cursor: pointer;
                    text-decoration: none;
                }
                
                .dropdown li a:hover {
                    background: #155FB0;
                    color: #FFFFFF;
                    text-decoration: none;
                }
                
                a.account {
                    font-size: 18px;
                    line-height: 16px;
                    color: #fff;
                    position: absolute;
                    z-index: 110;
                    display: block;
                    padding: 11px 0 0 20px;
                    height: 28px;
                    width: 150px;
                    margin: -11px 0 0 -10px;
                    text-decoration: none;
                    background: url(images/arrow.png) 80px 32px no-repeat;
                    cursor: pointer;
                }
                
                .root {
                    list-style: none;
                    font-size: 11px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
                    background: #fff;
                    padding: 10px 0 10px 0;
                    border-radius: 5px 5px 5px 5px;
                    margin: 21px 0 0 0;
                }
                
                .root:before {
                    content: '';
                    display: inline-block;
                    border-left: 7px solid transparent;
                    border-right: 7px solid transparent;
                    border-bottom: 7px solid #ccc;
                    border-bottom-color: #ffffff;
                    position: absolute;
                    color: #ffffff;
                    top: 54px;
                    right: 17px;
                }
                /* DropDown */
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: