I have a simple website.
When I test it offline by hosting it on localhost everything works fine.
However when I transfer the webpage to my hosting server and access it from the internet a black box appears at the bottom of the page as i scroll down. This does not happen when testing offline only online.
Stanger still if i rotate my screen to landscape and then back to portrait then the problem seems to go away , however if i reload the page it reappears.
Ps. I am accessing the website online using a mobile phone.
This is what the problem looks like
This is what problem looks like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impressions</title>
<link href="css/mobile.css" rel="stylesheet" />
</head>
<body>
<div>
<ul class="header">
<li class="streamicon"> <a href="Index.html#stream-link"><img src="sys_media/radio_tower_black.png" /></a></li>
<li class="headerlogo"> <a href="Index.html"><img src="sys_media/MenuBar_Logo.png"></a></li>
</ul>
</div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div class="footer">
<div id="end">
<img src="../sys_media/main_logo.png" /><br />
Copyright ©. 2021<br />
<div></div>
<a id="credit" href="www.elitewebsites.co.za">This website was designed by <span>www.elitewebsites.co.za</span></a>
</div>
</div>
</body>
</html>
```````````````````````````````
@import url('https://fonts.googleapis.com/css?family=Tw+Cen+MT+Condensed');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Tw Cen MT Condensed', sans-serif;
overflow-y: scroll;
}
.header {
display: block;
margin: 0 auto;
list-style-type:none;
width: 100%;
max-width: 100%;
box-shadow: none;
background: whitesmoke;
position: fixed;
height: 135px !important;
overflow: hidden;
z-index: 10;
border-bottom-style: solid;
border-bottom-width: 2px;
}
.streamicon img {
width: 100px;
height: 100px;
left: 24px;
position: absolute;
top: 17px;
}
.headerlogo img {
width: 556px;
height: 92px;
left: 29%;
position: absolute;
top: 26px;
}
input[type="checkbox"]:checked ~ .footer {
transform: translateX(-100%);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
background-color: black;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 44px;
left: 93.2%;
height: 22px;
width: 65px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 5px;
width: 100%;
background-color: black;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 18px;
background-color: black;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
background-color: black;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 18px;
background-color: black;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
top: 17px;
margin-left: 1px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -12px;
}
.footer {
position: relative;
font-size: 35px;
font-weight: bold;
margin-top: 60px;
margin-left:4vw;
text-align: center;
transition: transform 250ms ease-in-out;
}
.footer a {
color: #0f98fe;
font-size: 35px;
text-decoration: none;
}
.footer div{
height:21px;
}
.footer img {
width: 50%;
margin-left: 2.5%;
padding-bottom: 32px;
position: static;
}
.footer #end {
margin-top: 400px;
height: 590px;
position: absolute;
border-top: 0px solid;
font-size:35px;
}
.footer #credit {
display: inline;
color: black;
text-decoration:none;
}
.footer span {
color: #0f98fe;
}
.footer #end div{
height:21px;
}
}
`````````````````````````````
Aucun commentaire:
Enregistrer un commentaire