DEV Community

loading...

How to fit web page to screen size in html

whataluckyguy profile image Lalit Kumar ・4 min read

Solution


title: "How to fit web page to screen size in html"
tags: html

canonical_url: https://kodlogs.com/blog/308/how-to-fit-web-page-to-screen-size-in-html

STEP 1: First thing, you can do make website with % widths
Code:

.WebContainer{
    width: 100%;
    height: auto;
}
.articles{
    width:90%; /*Takes 90% width from WebContainer*/
    height: auto;
    margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

However, this method is less effective. Suppose a user loads the website from a mobile device. It takes the width from screens 100% which is very small amount of space. So, we need to go further step.

STEP 2: In this method we can give minimum width with percentages

.WebContainer{
    width:100%;
    min-width:1000px;
    height:auto;
}
Enter fullscreen mode Exit fullscreen mode

So, website decreases just up to 1000px

STEP 3: In this process we are going to use effective way of HTML and CSS

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test CSS3 HTML5</title>

    <!--[if IE]>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    <link href="IEStyleSheet.css" rel="stylesheet" />
    <![endif]-->

    <!--[if !IE]> -->
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" media="only screen" />
        <link href="MobileStyleSheet.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px) , only screen and (-webkit-min-device-pixel-ratio: 2) , screen and (-webkit-device-pixel-ratio:1.5)" />
        <!-- <![endif]-->

    <!--[if IEMobile]> 
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

        <link href="MobileStyleSheet.css" rel="stylesheet" />
    <![endif]-->

</head>
<body>
        <div class="Container">
            <header>
                <span>Adjustable WebSite Example using HTML5 CSS3 </span>
            </header>
            <nav>
            </nav>
            <div class="content">
                <section class="main_articles">
                    <article class="siteDescription">
                        <div class="desImage">
                            <img src="Images/css_image.jpg" />
                        </div>
                        <div class="des">
                            New web development technologies.
                        </div>
                    </article>
                </section>

                <aside class="side_article">
                    <div class="ads">
                        This is a Advertisement.
                    </div>

                    <div class="ads">
                        This is a Advertisement.
                    </div>
                </aside>
            </div>
            <footer>
            </footer>
        </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

For above HTML mark-up we have used semantic HTML.

STEP 4: In this process we are going to do explanation with basic CSS properties

body, html {
    margin: 0px;
    padding: 0px;
    background-color: #ededed;
    font-family: 'Trebuchet MS';
}

.Container {
    width: 90%;
    min-width: 500px;
    margin: auto;
}

header {
    width: 100%;
    height: 120px;
    line-height: 120px;
    background-color: #313131;
}

    header span {
        color: #fff;
        font-size: 30px;
        padding-left: 20px;
    }

nav {
    width: 100%;
    height: 40px;
    background-color: #ff6a00;
}

.content {
    width: 100%;
    height: 700px;
    padding: 10px 0px;
    background-color: #fff;
}

footer {
    width: 100%;
    height: 80px;
    background-color: #808080;
    margin-bottom: 20px;
}

.main_articles {
    width: 70%;
    float: left;
    height: 650px;
    margin-left: 10px;
}

.side_article {
    width: 25%;
    float: right;
    height: 600px;
    border-left: 1px dotted #6d6d6d;
}

.siteDescription {
    display: -moz-box; /* Firefox*/
    display: -webkit-box; /* Chrome */
    display: -ms-flexbox; /* IE 10 */
    display: flexbox;
    flex-direction: row;
    flex-align:start;
    width: 95%;
    height: 150px;
}

.desImage {
    -webkit-box-ordinal-group: 1; /* iOS 6-, Safari, Opera*/
    -moz-box-ordinal-group: 1; /* Firefox*/
    -ms-flex-order: 1; /* IE 10 */
    -webkit-order: 1; /* Chrome */
    flex-order: 1;
    width: 200px;
    height: 150px;
}

    .desImage img {
        width: 200px;
        height: 150px;
        margin-left: 5px;
        border: 2px solid #6d6d6d;
    }

.des {
    margin-left: 15px;
    -webkit-box-ordinal-group: 2; /* iOS 6-, Safari, Opera*/
    -moz-box-ordinal-group: 2; /* Firefox*/
    -ms-flex-order: 2; /* IE 10 */
    -webkit-order: 2; /* Chrome */
    flex-order: 2;
    width: 70%;
    height: 140px;
    background-color: #e9e9e9;
    padding: 5px;
}

.ads {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    height: 150px;
    text-align: center;
    padding-top: 10px;
    background-color: #e5eff3;
}
Enter fullscreen mode Exit fullscreen mode

First, we removed the browser default margin and padding. Then set the background color and font.

STEP 5: In this process we are doing some modification when screen comes to width of 900px

@media all and (max-width: 900px) {
    .side_article { /* Hide advertisement panel*/
        display: none;
        visibility: hidden;
    }

    .siteDescription {
        width: 100%; /* Earlier 70%*/
    }

    .main_articles {
        width: 90%;/* Earlier 95%*/
    }
}
Enter fullscreen mode Exit fullscreen mode

STEP 6: In this process we are going to do some space modification when the screen gets up to 700px

@media all and (max-width: 700px) {

    header {
        height: 90px; * Earlier 120px*/
        line-height: 90px; * Earlier 120px*/
    }

        header span {
            font-size: 20px; /* Earlier 30px*/
        }

    .des {
        width: 50%; /* Earlier 70%*/
        background-color: #e9e9e9;
    }
}
Enter fullscreen mode Exit fullscreen mode

STEP 7: In this process we are going to do some modifications when screen up to width of 500px

@media all and (max-width: 500px) {
    header {
        height: 70px;
        line-height: 70px;
    }

        header span {
            font-size: 16px;
        }

    .side_article {
        display: none;
        visibility: hidden;
    }

    .main_articles {
        width: 90%;
    }

    .siteDescription {
        width: 95%;
        height: auto;
        display: block;
    }

    .desImage {
        margin: auto;
        width: 90%;
        height: auto;
    }

        .desImage img {
            width: 95%;
            margin-left: 5px;
        }

    .des {
        margin: auto;
        margin-top: 10px;
        width: 90%;
        height: 300px;
        background-color: #d9d9d9;
    }
}
body, html {
    margin: 0px;
    padding: 0px;
    background-color: #ededed;
    font-family: 'Trebuchet MS';
}

@media only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2) , screen and (-webkit-device-pixel-ratio:1.5){
    .Container {
        width: 90%;
        min-width: 480px;
        margin: auto;
    }

    header {
        width: 100%;
        height: 150px;
        line-height: 150px;
        background-color: #313131;
    }

        header span {
            color: #fff;
            font-size: 35px;
            padding-left: 20px;
        }

    nav {
        width: 100%;
        height: 70px;
        background-color: #ff6a00;
    }

    .content {
        width: 100%;
        height: 900px;
        clear:both;
        padding: 10px 0px;
        background-color: #fff;
        font-size:35px;
    }

    footer {
        width: 100%;
        height: 80px;
        background-color: #808080;
        margin-bottom: 20px;
    }

    .main_articles {
        width: 95%;
        float: left;
        height: auto;
        margin:auto;
    }

    .side_article {
        display: none;
        visibility: hidden;
    }

    .siteDescription {
        width: 95%;
        height: auto;
        display: block;
        margin:auto;
    }

    .desImage {
        margin: auto;
        width: 100%;
        height: auto;
    }

        .desImage img {
            width: 100%;
            height: 100%;
            margin-left: 5px;
            border: 2px solid #6d6d6d;
        }

    .des {
        margin: auto;
        margin-top: 10px;
        width: 100%;
        height: 300px;
        background-color: #d9d9d9;
        padding: 5px;
    }
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide