how to make the design fully responsive

Question

The page open with scroll. I want to make the page appear fully responsive without any scroll bar. I tried to set the height to 100% with no luck.

html {
    height: 100%;
    width: 100%;
}
body{
width:100%;
hight:100%;
margin: 0;
padding:0;
}
.main{
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
padding-top: 30vw;
background-size: 100%;
}
.marquee {
    display: block;
    position: relative;

width: 51vw;
margin: auto;


}
marquee{
width: 100%;
margin: auto;
display: block;
}
#btn1 {
    background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center ;
    display: block;
    height: 53px;
    margin: 0 auto;
    position: relative;
    width: 50%;
background-size: 100%;
margin-top: 33%;
margin-bottom:1%;
}
.button {
    padding: 5px;
}
.container {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
}


@media screen and (max-width:500px) {
    #btn1{
        background-size: 100% auto;
    }
}

<div class="main">
    <div class="container">
        <div class="marquee">
            <marquee scrollamount="3" direction="right" dir="ltr">
                 <h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>  
    <img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
        </strong></h3>

            </marquee>
        </div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>

    </div>
</div>

possible duplicate of [Hiding the scrollbar on an HTML page](http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) — TheNorthWes, Jun 10 '14 at 18:08

score 0 · Answer 1 · answered Jun 10 '14 at 18:18

0

This is the problem

body {
    width: 100%;
    hight: 100%;  <----- 'hight' make it 'height'
    margin: 0;
    padding: 0;
}

Replace with this

body {
    width:100%;
    height:100%;
    margin: 0;
    padding:0;
}

answered Jun 10 '14 at 18:18

4dgaurav

11,360
4
32
59

score 0 · Answer 2 · answered Jun 10 '14 at 18:23

the ratio of your image will make it difficult i believe.

Since you started using vw units, maybe it's an hint to use vh units and max-width too.

Because of your image, too much like a square, the container needs too be a bit smaller to stay in sight. Because of , vw units, i would propose to use display:fle to easily center you container :

DEMO of my idea

CSS updated :

html {
    height: 100%;
    width: 100%;
}
body {
    width:100%;
    height:100%;/* UPDATED*/
    margin: 0;
    padding:0;
    display:flex;/* UPDATED*/
}
.main {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    padding-top: 15vh;/* UPDATED*/
    background-size: 100%;
    width:100vh;/* UPDATED*/
    margin:auto;/* UPDATED*/
    max-width:100vw;/* UPDATED*/
    overflow:hidden;/* UPDATED hide marquee*/
}


.container {
    display: block;
    height: 100%;/* useless when parent has no height given */
    margin: 0 auto;
    position: relative;
}

how to make the design fully responsive

2 Answers2