hello i'm facing a problem with responsive an intro , the page open with scroll , i want to make the page appear fully responsive without any scroll bar ,, i tried to set the height 100% with no luck
HTML
<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>
CSS
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;
}
}
here's jsfiddle:
http://jsfiddle.net/m0sagal/afB6a/
Thanks in advanced
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;
}
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 :
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.