Witam. Strona jest gotowa, wszystko dobrze działa, ale po stworzeniu domeny i dodaniu strony google po kilku dniach wykryło błąd na stronie. Mianowicie chodzi o powstającą kreskę gdy ekran, na którym wyświetlana jest strona jest mniejszy niż 480px. Sprawdzałem wiele rzeczy i nie wiem dlaczego takie coś się dzieje. Kreska jest na długości całej strony. Poniżej wrzucam fragment kodu strony, na którym jest to widoczne i screen tego przypadku.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="style2.css" rel="stylesheet">
</head>
<body>
<nav>
<!-- MENU -->
<div id="navbarLeft">
<div id="nav_break_left"> </div>
<div id="logo">
<a href="#"> <img src="grafika/logo_bez_tla.png" width="100%" height="90%" alt="logo"> </a>
</div>
<div id="nav_break_right"> </div>
</div>
<div id="navbarRight">
<div class="nav_break_menu"> </div>
<div class="navbar">
<a href="#oFirmie"> <span class='fas fa-home' style='font-size:24px'> </span> <br> O firmie </a>
</div>
<div class="menuLine"> </div>
<div class="navbar">
<a href="#uslugi"> <span class='fas fa-tools' style='font-size:24px'> </span> <br> Usługi </a>
</div>
<div class="menuLine"> </div>
<div class="navbar" id="dropdown">
<a href="#realizacje"> <span class='fas fa-image' style='font-size:24px'> </span> <br>
Realizacje</a>
</div>
<div class="menuLine"> </div>
<div class="navbar" style="border: none">
<a href="#kontakt"> <span class='fas fa-phone' style='font-size:24px'></span> <br> Kontakt </a>
</div>
</div>
</nav>
<article>
<!-- Pokaz slajdów -->
<div id="welcome">
<ul id="slides">
<li class="slide showing"> <img src="/grafika2/ukonczone/dom1.jpg" width="100%" height="100%" alt="dom">
<div class="slideText">
</div>
<div class="text"> Witamy na naszej stronie </div>
</li>
<li class="slide"> <img src="/grafika2/ukonczone/kostka.jpg" width="100%" height="100%" alt="dom">
<div class="slideText">
</div>
<div class="text"> Firma budowlana zubczyńscy </div>
</li>
<li class="slide"> <img src="/grafika2/ukonczone/ogrodzenie.jpg" width="100%" height="100%" alt="dom">
<div class="slideText">
</div>
<div class="text"> Zapraszmy do współpracy </div>
</li>
</ul>
</div>
<!-- O FIRMIE -->
<section id="oFirmie">
<h1> Informacje o naszej firmie </h1>
<div id="oFirmieLeft">
<div class="oFirmieBreakImageLeft"> </div>
<div id="images">
<img src="grafika/budowa.jpg" alt="budowa">
</div>
<div class="oFirmieBreakImageRight"> </div>
</div>
<div id="oFirmieRight">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cum consectetur vitae quos dolores
explicabo nostrum laudantium cupiditate illo libero repellat earum perferendis accusantium nulla
officiis, atque nam voluptate quidem corporis.
</p>
<br>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas hic molestias, atque eveniet corporis
recusandae ipsam placeat architecto. Sapiente debitis facilis corrupti ducimus beatae saepe ipsum
similique nihil fuga eligendi.
</p>
<br>
<p class="line"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic modi itaque dolores atque
quia esse, vitae accusantium vel sunt perferendis? Eaque, minus natus libero molestias dolorum
inventore magnam mollitia enim!
</p>
</div>
</section>
</article>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
background-color: black;
font-family:"Trebuchet MS", Helvetica, sans-serif;
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: black;
}
h1 {
text-align: center;
font-size: 9vh;
margin-top: 110px;
margin-bottom: 6vh;
width: 100%;
float: left;
}
@media screen and (max-width: 800px) {
h1 {
margin-top: 180px;
font-size: 7vh;
}
}
/* MENU */
#navbarLeft {
width: 50%;
height: 100px;
background-color: #e6e6e6;
position: fixed;
z-index: 5;
}
#nav_break_left {
width: 25%;
height: 100%;
background-color: #e6e6e6;
float: left;
}
#logo {
width: 50%;
height: 100%;
float: left;
}
#logo img {
width: 100%;
height: 90%;
margin-top:1%
}
#nav_break_right {
width: 25%;
height: 100%;
background-color: #e6e6e6;
float: left;
}
#navbarRight {
right: 0;
position: fixed;
height: 100px;
width: 50%;
background-color: #e6e6e6;
z-index: 5;
}
.navbar {
width: 24%;
float: left;
height: auto;
font-size: 30px;
color: black;
text-align: center;
border-right: 2px solid gray;
background-color: #e6e6e6;
}
.navbar:hover {
color: red;
}
.nav_break_menu {
float: right;
height: 15%;
width: 100%;
background-color: #e6e6e6;
}
@media screen and (max-width: 1250px) {
#navbarLeft {
width: 35%;
}
#nav_break_left {
width: 0;
}
#navbarRight {
width: 65%;
}
}
@media screen and (max-width: 950px) {
#navbarLeft {
width: 25%;
}
#navbarRight {
width: 75%;
}
#logo {
width: 90%;
}
#nav_break_right {
width: 0;
}
}
@media screen and (max-width: 800px) {
#navbarLeft {
height: 80px;
width: 100%;
}
#nav_break_left {
width: 35%;
height: 80px;
}
#logo {
width: 30%;
height: 80px;
}
#nav_break_right {
width: 35%;
height: 80px;
}
.nav_break_menu {
width: 0;
}
#navbarRight {
margin-top: 80px;
height: 60px;
width: 100%;
float: left;
}
.menuLine {
width: 1%;
height: 100%;
float: left;
background-color: gray;
}
#navbarRight .navbar {
width: 24.25%;
border: none;
height: 100%;
font-size: 25px;
}
}
@media screen and (max-width: 650px) {
#navbarRight .navbar {
font-size: 18px;
}
}
/* Pokaz slajdów */
#welcome {
top: 100px;
width: 100%;
height: 700px;
position: relative;
float: left;
background-color: white;
padding-bottom: 2%;
}
#slides {
width: 100%;
height: 100%;
position: relative;
list-style: none;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0;
-webkit-transition: opacity 4s;
-moz-transition: opacity 4s;
-o-transition: opacity 4s;
transition: opacity 4s;
}
.showing {
opacity: 1;
z-index: 1;
}
.slideText {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width: 60%;
height: 100px;
z-index: 3;
top: 550px;
left: 20%;
border: 5px solid black;
border-right: 5px solid black;
filter: blur(2px);
-webkit-filter: blur(2px);
}
#welcome .text {
font-size: 40px;
color: white;
position: absolute;
text-align: center;
width: 60%;
height: 100px;
z-index: 3;
top: 550px;
left: 20%;
padding-top: 30px;
text-transform: uppercase;
text-shadow: 0px 0px 2px white;
}
@media screen and (max-width: 1050px) {
#welcome {
height: 600px;
}
.slideText {
top: 480px;
left: 0;
width: 70%;
height: 80px;
left: 15%;
}
#welcome .text {
width: 70%;
left: 15%;
height: 80px;
top: 480px;
font-size: 35px;
padding-top: 25px;
}
}
@media screen and (max-width: 800px){
#welcome {
height: 500px;
}
.slideText {
top: 420px;
left: 0;
width: 90%;
height: 50px;
left: 5%;
}
#welcome .text {
width: 100%;
left: 0;
height: 50px;
top: 420px;
font-size: 18px;
padding-top: 19px;
}
}
/* O FIRMIE */
#oFirmie {
top: 0px;
width: 100%;
height: auto;
position: relative;
float: left;
background-color: #333333;
padding-bottom: 2%;
}
#oFirmie h1 {
color: white;
text-shadow: 0 0 10px black;
}
#oFirmieLeft {
width: 45%;
height: auto;
float: left;
}
#oFirmieLeft #images {
width: 70%;
height: 100%;
float: left;
margin-left: 20%;
}
#oFirmieLeft img {
float: left;
width: 100%;
height: 45%;
box-shadow: 0 0 5px white;
border-radius: 20px;
}
#oFirmieRight {
width: 45%;
height: auto;
float: right;
color: white;
margin-right: 5%;
}
#oFirmieRight h2 {
text-align: center;
font-size: 4vh;
}
p {
font-size: 2.5vh;
text-align: justify;
line-height: 5vh;
padding: 0 10%;
}
#oFirmieRight .line {
border-left: 5px solid red;
width: 80%;
}
@media screen and (max-width: 800px) {
#oFirmie {
top: -50px;
}
#oFirmie h1 {
font-size: 5vh;
}
#oFirmieLeft {
width: 100%;
}
#oFirmieLeft #images {
width: 40%;
margin-left: 30%;
}
#oFirmieRight {
padding-top: 3vh;
padding-bottom: 3vh;
width: 100%;
margin: 0;
}
#oFirmie .line {
width:79%;
}
}
Screen:
Początkowo myślałem, że to wina menu, które jest Fixed, ale jednak to nie jest przyczyną. Może ktoś wie gdzie tkwi problem?
