Mam następujący problem. Zrobiłem stronę, która wyświetla się poprawnie odczytywana z pulpitu przez przeglądarkę, ale po wgraniu na serwer lokalny xampp przy próbie uruchomienia część strony nie jest wyświetlana. To samo dzieję się po wgraniu na serwer w internecie oczywiście cały czas ten sam PC i przeglądarka, ale tutaj ciekawostka a mianowicie na iphonie wszystko widać jak należy. Gdzie może leżeć problem? Chodzi o te kolorowe pola. Link do strony: http://mojatestowa.pl/nowylayout/
Dodam jeszcze, że sprawdziłem na ipadzie i też strona jest wyświetlana poprawnie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ogłoszenia lokalne</title>
<link rel="stylesheet" href="style/style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Risque&subset=latin-ext" rel="stylesheet">
</head>
<body>
<header class="container">
<div class="session">
<p></p>
<a href="#">Nie jesteś zalogowany</a>
<p>Dzisiaj jest 25-12-2017</p>
</div>
<div class="logo">
<h1><a href="#">Ogłoszenia lokalne</a></h1>
<h2>ogłoszenia drobne</h2>
</div>
<div class="topMenu listStyle">
<ol>
<a href="#"><li>Home</li></a>
<a href="#"><li>Kategorie</li></a>
<a href="#"><li>Ogłoszenia</li></a>
<a href="#"><li>Dodaj</li></a>
<a href="#"><li>Zaloguj</li></a>
<a href="#"><li>Zarejestruj</li></a>
</ol>
</div>
</header>
<main class="container">
<div class="block topBlock">
<h3>Ogłoszenia lokalne</h3>
<p>Darmowe oferty pracy, ogłoszenia kupna i sprzedaży nieruchomości, samochodów, artykułów agd i rtv, zwierząt, ubrań...
Wybierz swój region i przeglądaj 658 169 ogłoszeń.</p>
</div>
<div class="mainContent">
<div class=leftColumn>
<div class="block left">
<form action="...">
<h3>Region</h3>
<select name="Region">
<option></option>
<option>Dolnośląskie</option>
<option>Kujawsko-pomorskie</option>
</select>
<h3>Miasto</h3>
<select name="Miasto">
<option></option>
<option></option>
<option></option>
</select>
<h3>Kategoria</h3>
<select name="Kategoria">
<option></option>
<option></option>
<option></option>
</select>
<input type="submit" class="more button" value="Pokaż ogłoszenia">
</form>
</div>
<div class="block left">
<h3>Region</h3>
<ol>
<a href=""><li>Dolnośląskie</li></a>
<a href=""><li>Kujawsko-pomorskie</li></a>
<a href=""><li>Lubelskie</li></a>
<a href=""><li>Łódzkie</li></a>
<a href=""><li>Małopolskie</li></a>
<a href=""><li>Mazowieckie</li></a>
<a href=""><li>Opolskie</li></a>
<a href=""><li>Podkarpackie</li></a>
<a href=""><li>Podlaskie</li></a>
<a href=""><li>Pomorskie</li></a>
<a href=""><li>Śląskie</li></a>
<a href=""><li>Świętokrzyskie</li></a>
<a href=""><li>Warmińsko-mazurskie</li></a>
<a href=""><li>Wielkopolskie</li></a>
<a href=""><li>Zachodniopomorskie</li></a>
</ol>
</div>
<div class="block left">
<h3>Kategorie</h3>
<ol>
<a href=""><li>Motoryzacja</li></a>
<a href=""><li>Dom i ogród</li></a>
<a href=""><li>Moda i Uroda</li></a>
<a href=""><li>Nieruchomości</li></a>
<a href=""><li>Elektronik</li></a>
<a href=""><li>Rozrywka, rekreacja</li></a>
<a href=""><li>Usługi i firmy</li></a>
<a href=""><li>Praca</li></a>
<a href=""><li>Dla dziecka</li></a>
<a href=""><li>Zwierzęta</li></a>
<a href=""><li>Różne</li></a>
</ol>
</div>
</div>
<div class="rightColumn">
<div class="block">
<h3>Ostatnio dodane ogłoszenia</h3>
</div>
<div class="adsBlock buy">
<h2>Lorem ipsum dolor sit amet</h2>
<h4>Dodano: 20.12.2017</h4>
<h4>Dodał: Michał</h4>
<h4>Wrocław</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra est imperdiet magna eleifend, ut auctor nibh suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec...</p>
<input type="submit" class="more Buy" value="Dowiedz się więcej">
</div>
<div class="adsBlock sell">
<h2>Lorem ipsum dolor sit amet</h2>
<h4>Dodano: 20.12.2017</h4>
<h4>Dodał: Michał</h4>
<h4>Wrocław</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra est imperdiet magna eleifend, ut auctor nibh suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec...</p>
<input type="submit" class="more Sell" value="Dowiedz się więcej">
</div>
<div class="adsBlock exchange">
<h2>Lorem ipsum dolor sit amet</h2>
<h4>Dodano: 20.12.2017</h4>
<h4>Dodał: Michał</h4>
<h4>Wrocław</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra est imperdiet magna eleifend, ut auctor nibh suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec...</p>
<input type="submit" class="more Exchange" value="Dowiedz się więcej">
</div>
</div>
</div>
</main>
<footer class="containerFooter">
<div class="allRights">
<p class="copy">Wszelkie prawa zastrzeżone © 2017</p>
<p clas="center"></p>
<ol>
<a href="#" class="biger"><li>Polityka Prywatności</li></a>
<a href=""><li>O stronie</li></a>
<a href=""><li>O autorze</li></a>
<a href="" class="biger"><li>Regulamin Strony</li></a>
</ol>
<p clas="center"></p>
<p class="who">Stronę przygotował DudSon</p>
</div>
</footer>
</body>
</html>
A tutaj css. Powinien się znaleźć w folderze style
/* Reset styli domyślnych */
*
{
margin: 0;
padding: 0;
}
/* Style ogólne dla strony */
body
{
background-color: #031526;
clear:both;
clear:both;
}
main
{
min-height: 100px;
}
.container
{
width:100%;
margin:0 auto;
}
/* Nagłówek strony */
.session
{
width:100%;
min-height:10px;
background-color: #1F3349;
padding:10px 0 5px 0;
text-align: center;
}
@media (min-width: 600px)
{
.session
{
display: flex;
}
}
.session a
{
text-decoration: none;
color:#FFF;
line-height: 10px;
flex:1;
}
.session p
{
color:#FFF;
flex: 1;
}
.listStyle
{
width:100%;
min-height:15px;
background-color: #1F3349;
padding:10px 0 5px 0;
}
.listStyle li
{
display: block;
margin:0px auto 5px auto;
height:30px;
line-height: 30px;
text-align: center;
border-radius: 7px;
}
@media (min-width: 600px)
{
.topMenu ol
{
display: flex;
}
.topMenu a
{
flex:1;
}
}
.topMenu li
{
width:90%;
}
.listStyle li:hover
{
background-color: #2B4364
}
.listStyle a
{
color: #FFF;
text-decoration: none;
font-size: 20px;
}
.logo
{
width:100%;
min-height:100px;
}
.logo h1
{
text-align: center;
font-size: 3rem;
}
.logo h2
{
text-align: center;
font-size: 2rem;
color: #76D1FE;
}
@media (orientation: landscape )
{
.logo
{
height:100px;
}
.logo h1
{
font-size: 3.4rem;
}
.logo h2
{
font-size: 1.5rem;
margin-left:-30%;
}
}
.logo a
{
font-family: 'Risque', cursive;
color:#C1DB4D;
text-decoration: none;
}
/* Elementy blokowe strony */
.block
{
border:1px #3C4D5E solid;
margin:15px;
background-color: #1F3349;
padding: 15px;
text-align: justify;
color:white;
}
@media (min-width: 600px)
{
.mainContent
{
display: flex;
}
.topBlock
{
margin-bottom:0;
}
.left
{
margin-right: 0px;
}
.leftColumn
{
flex:1;
}
.rightColumn
{
flex:4;
}
}
.block h3
{
color:white;
padding: 0 0 10px 0
line-height:30px;
}
.block ol
{
list-style: square inside url("../images/list.bmp");
}
.block ol a
{
color:#2EA3F1;
text-decoration: none;
}
.block ol a:hover
{
text-decoration: underline;
color:#C1DB4B;
}
/* Style dla bloku wyszukiwania */
.block select
{
width:100%;
margin-bottom: 10px;
}
/* Style dla ogłoszenia */
.adsBlock
{
margin:15px;
padding: 15px;
text-align: justify;
color:white;
clear: both;
}
.adsBlock.buy
{
background-color:#2BA9B9;
}
.adsBlock.sell
{
background-color: #80A305;
}
.adsBlock.exchange
{
background-color: #FC6002;
}
/* Style przycisków */
.more
{
border: none;
padding: 7px;
border-radius: 7px;
margin-top: 10px;
color:#FFF;
}
.more.Buy
{
background-color: #1F7C8C;
}
.more.Buy:hover
{
background-color: #58B6C9;
}
.more.Sell
{
background-color:#5A780E;
}
.more.Sell:hover
{
background-color:#93B24B;
}
.more.Exchange
{
background-color:#B1490C;
}
.more.Exchange:hover
{
background-color:#EA8349;
}
.more.button
{
background-color: #172A3E;
border:1px #203A58 solid;
}
.more.button:hover
{
background-color: #50647B;
}
/* Style dla stopki */
footer
{
width:100%;
min-height: 70px;
background-color: #1F3349;
}
footer ol
{
margin: 0 auto;
width: 100%;
}
@media (min-width: 600px)
{
.allRights
{
width:550px;
margin: 0 auto;
}
footer ol
{
display: flex;
}
footer ol a
{
flex:1;
}
.biger
{
flex:2;
}
}
footer ol li
{
/*width:100%;*/
list-style-type: none;
text-align: center;
}
footer ol a
{
color: #5A91D1;
text-decoration: none;
}
footer ol a:hover
{
text-decoration: underline;
color:#A0C1E2;
}
.copy
{
width:100%;
text-align: center;
color:#B8BBC4;
padding:5px 0;
}
.who
{
width:100%;
text-align: center;
color:#E7F1F0;
padding: 5px 0;
}
Proszę o jakieś wskazówki, bo nie mam pojęcia co jest nie tak. Pierwszy raz użyłem display:flex może nie umiejętnie. Chętnie też przyjmę ocenę mojego kodu.