Strona na telefonie się rozlewa

pytanie zadane 24 maja 2018 w Nasze projekty przez Nhandu Nowicjusz (240 p.)

Witam, pod wpływem poradników Pana Mirosława, znów zacząłem tworzyć strony, WWW, pomyślałem, że stworzę stronę dla serwisu komputerowego, w moim mieście. Strona w celach testów wisi pod adresem kenpachi.cba.pl

Problem polega na tym że na telefonie na przeglądarce Chrome, kilka podstron rozlewa się, na przeglądarce ) systemowej ('samsungowej' ) wszystko jest ok, więc pytanie moje, czy to ja coś pomerdałem w kodzie, czy może chrome na tel, nie potrafi odpowiednio wyrenderować mojej strony :P

Tutaj kod jednej z podstron która 'rozlewa się' :

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>MPS - komputery</title>
	<meta name="description" content="Kupno, sprzedaż, naprawa spzętu komputerowego" />
	<meta name="keywords" content="komputery, sprzedaż, naprawa" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="author" content="Dawid Pawlicki" />
		
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/mail.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&amp;subset=latin-ext" rel="stylesheet"> 
	
</head>

<body>

<div id="container">
	<div id="logo">
		<span class="aaa">MPS</span> <span class="bbb">komputery</span>
	</div>
	<div id="menu">
		<a href="index.html"><div class="button">Start</div></a>
		<a href="oferta.html"><div class="button">Oferta</div></a>
		<a href="pracownicy.html"><div class="button">Pracownicy</div></a>
		<a href="dojazd.html"><div class="button">Dojazd</div></a>
		<a href="kontakt.html"><div class="button">Kontakt</div></a>
		
	</div>
	<div id="content">
		<div id="lewyk">
			<p>Dane kontaktowe:</p>
			<p>MPS D.Poślada A.Sztompka Sp.j.</p>
			<p>ul. Armii Krajowej 43</p>
			<p>05-200 Wołomin</p>
			<p>NIP: 125-12-24-068</p>
		</div>
		<div id="srodek">
			<p>Telefon stacjonarny:</p>
			<p>(022) 787-55-52 </p>
			<p>Telefony komórkowe:</p>
			<p>602-133-199 </p>
			<p>504-504-374</p>
		</div>
		<div id="prawyk">
			<p>Adres mailowy:</p>
			<p>mps@mps-komputery.com</p>
			<a href="mailto:mps@mps-komputery.com"><div class="button">Napisz do nas!</div></a>
		</div>
		<div style="clear: both;"></div>
	</div>
	<div style="clear: both;"></div>
	<div id="stopka">
		MPS komputery zaprasza. Tel.(022) 787-55-52 <a href="mailto:mps@mps-komputery.com"><i class="demo-icon icon-mail"></i></a>&nbsp; &copy; 2018   
	</div>
</div>

	
</body>
</html>

body
{
	/* Background pattern from Toptal Subtle Patterns */
	background-image: url(seamless_paper_texture.png);
	font-family: 'Ubuntu', sans-serif;
}
#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
.aaa
{
	color: red;
}
.bbb
{
	color: blue;
}
#logo 
{
	height: 70px;
	font-size: 36px;
	text-align: center;
	letter-spacing: 3px;
	border-bottom: 3px solid rgba(26, 167, 209, 0.9);
}
#ok
{
	
}
#menu
{
	float:left;
	width: 160px;
	margin-top: 25px;
	/* Background pattern from Toptal Subtle Patterns */
	/*background-image: url(img/what-the-hex-dark.png);*/
	min-height: 370px;
}
#content
{
	float: left;
	text-align: center;
	width: 804px;
	margin-top: 25px;
	/*background-color: #6691bb;*/
	min-height: 370px;
	border-right: 3px solid rgba(26, 167, 209, 0.9);
	border-left: 3px solid rgba(26, 167, 209, 0.9);
	padding-left: 15px;
	padding-right: 15px;
}
.button
{
	background-color: rgba(26, 167, 209, 0.9);
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	height: 37px;
	border-radius:3px;
	font-size: 20px;
	text-align: center;
	padding-top: 15px;
}
.button:hover
{
	background-color: rgba(22, 163, 205, 0.6);
	cursor: pointer;
	
}
a, a:visited
{
	text-decoration: none;
	color: #000;
}


#stopka
{
	margin-top: 25px;
	padding: 20px;
	border-top: 3px solid rgba(26, 167, 209, 0.9);
	text-align: right;
}
#mapa
{
	float: left;
	width: 400px;
	padding: 15px;
	border-right: 1px solid rgba(26, 167, 209, 0.9);
}
#adres
{
	width: 356px;
	float: left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-left: 15px;
}
.portret
{
	float: left;
	margin-left: 70px;
	width: 180px;
	height: 330px;
	margin-top: 12px;
}
#lewa
{
	float: left;
	width: 304px;
	margin-top: 70px;
}
#prawa
{
	float: left;
	width: 500px;
	margin-top: 20px;
}
#lewyk
{
	float: left;
	width: 267px;
	border-right: 1px solid rgba(26, 167, 209, 0.9);
	text-align: center;
	margin-top: 50px;
	min-height: 230px;
}
#srodek
{
	float: left;
	width: 267px;
	text-align: center;
	margin-top: 50px;
	border-right: 1px solid rgba(26, 167, 209, 0.9);
	min-height: 230px;
}
#prawyk
{
	float: left;
	width: 252px;
	text-align: center;
	margin-top: 50px;
	min-height: 230px;
	margin-left:15px;
}
ul
{
	text-align: left;
	margin-top: 50px;
}
.image {
    width: 120px;
    height: 160px;
}
 
.domek
{
	width: 480px;
    height: 300px;
}

3 odpowiedzi

odpowiedź 24 maja 2018 przez Daniel90 Pasjonat (17,970 p.)

odpowiedź 24 maja 2018 przez Nhandu Nowicjusz (240 p.)

dorzucam sreeny z chroma na samsungu

komentarz 24 maja 2018 przez BillieQ Użytkownik (980 p.)

zdaje mi się że reklama z "cba" jest za szeroka i po prostu są z nią problemy, firefox ma możliwość zobaczenia strony offline możesz ją tam przetestować. Na dłuższą metę jeśli jesteś skąpy oszczędny to poczytaj o github pages albo zainwestuj w jakiś hosting :)