Witam. Moja strona na komputerze wygląda dobrze, skaluje się bez żadnego problemu do szerokości telefonu (poniżej 800px) i wszystko zajmuje 100% szerokości tak jak powinno być. Natomiast gdy włączam stronę na telefonie tylko element fixed jest na 100% szerokości strony, a cała reszta na połowie. Strona gdy włącza się na telefonie jest dopasowana do zawartości pozostałych elementów, ale gdy ją powiększę to jest do szerokości elementu fixed. Co może być problemem. Mam użyty <meta name="viewport" content="width=device-width, initial-scale=1.0">.
<!DOCTYPE html>
<html lang="en">
<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="style.css" rel="stylesheet">
</head>
<body>
<nav>
<!-- MENU -->
<div id="nav_break_left"> </div>
<div id="logo">
<a href="#"> <img src="grafika/logo_bez_tla.png" width="100%" height="90%" style="margin-top:1%"> </a>
</div>
<div id="nav_break_right"> </div>
<div class="nav_break_menu"> </div>
<div id="navbar">
<div class="navbar">
<a href="#oFirmie"> <span class='fas fa-home' style='font-size:24px'> </span> <br> O firmie </a>
</div>
<div class="navbar">
<a href="#uslugi"> <span class='fas fa-tools' style='font-size:24px'> </span> <br> Usługi </a>
</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="navbar" style="border: none">
<a href="#kontakt"> <span class='fas fa-phone' style='font-size:24px'></span> <br> Kontakt </a>
</div>
</div>
</nav>
<article>
<!-- 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">
</div>
<div class="oFirmieBreakImageRight"> </div>
</div>
<div id="oFirmieRight">
<p> Swoją działalność rozpoczęliśmy w 2017 roku</p>
<br>
<p> Mimo iż firma nie jest długo na rynku, bardzo dynamicznie się rozwija.</p>
<br>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque recusandae
sapiente nobis amet. Et accusamus facere porro voluptates ipsam sunt, aliquam placeat dolores quasi
dolorum hic aspernatur expedita ullam?
</p>
<br>
<p class="line"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, rerum ratione quis
quidem tempora obcaecati vitae consequuntur suscipit unde iure beatae iste, facilis quae quod est
quia, laborum optio dolor!
</p>
</div>
</secttion>
</article>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
width: 100%;
background-color: lightgray;
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 */
nav {
width: 100%;
height: 100px;
background-color: #e6e6e6;
position: fixed;
z-index: 2;
}
#nav_break_left {
width: 15%;
height: 100%;
background-color: #e6e6e6;
float: left;
}
#logo {
width: 20%;
height: 100%;
float: left;
}
#nav_break_right {
width: 15%;
height: 100%;
background-color: #e6e6e6;
float: left;
}
#navbar {
float: left;
height: 50%;
width: 50%;
}
.navbar {
width: 24%;
min-width: 20%;
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: left;
height: 15%;
width: 50%;
background-color: #e6e6e6;
}
#hiddenMenu {
display: none;
}
@media screen and (max-width: 1250px) {
#nav_break_left {
width: 0;
}
#navbar {
width: 65%;
}
}
@media screen and (max-width: 950px) {
#nav_break_left {
width: 0;
}
#navbar {
width: 75%;
}
#nav_break_right {
width: 5%;
}
}
@media screen and (max-width: 800px) {
#nav {
height: auto;
width: auto;
}
#nav_break_left {
width: 35%;
height: 80px;
}
#logo {
width: 30%;
height: 80px;
}
#nav_break_right {
width: 35%;
height: 80px;
}
.nav_break_menu {
width: 0;
}
#navbar {
width: 100%;
height: 80px;
}
#navbar .navbar {
width: 25%;
border: none;
}
}
/* O FIRMIE */
#oFirmie {
top: 50px;
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: 30px;
}
#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%;
}
}
Sceeny z telefonu jak to wygląda:
Jak się włącza na telefonie
Po powiększeniu strony;
