Co zrobić, żeby strona poprawnie wyświetlała się na urządzeniach mobilnych

Question

Witam serdecznie. Tworzę stronę internetową na własne potrzeby i niestety nie działa ona poprawnie na urządzeniach mobilnych. Kombinowałem na różne sposoby i nie mogę tego rozgryźć :/

 

Na dole załączam link i zwracam się z prośbą o zbadanie kodu i podpowiedź co zmienić, żeby divy układały się w kafelki na urządzeniach mobilnych:

 

http://mkwstudio.pl/web/index.html

Comments

media queries

Answer 1

Wszystkie style powinny być poza dokumentem html w css. Logo ostylizowane za pomocą znacznika <span> (pozwala ostylizować elementy liniowe. ) oraz podpis pod nim w znaczniku <p> (przenosi napis do nowej linii - akapit) Menu zaprojektowane za pomocą list<ol> lub <ul>. Kurs HTML odc. 4: Listy, automatyczne przewijanie strony, Kurs CSS odc. 3: Rozwijane, przyklejane menu główne (sticky). Poza tym jeżeli chodzi o urządzenia mobilne to należy dobrze zastanowić się nad strukturą strony , najlepiej zacząć od layautu mobilnego i zastosować oczywiście wartości procentowe(płynny layaut) oraz media queries. To wszystko dla ułatwienia można umieścić na siatce (grid czyli siatka ułatwiające rozmieszczenie elementów na stronie)

Comments

Poprawiłem logo, poprawiłem Menu, wszystko według Twoich zaleceń jednak dalej występują błędy przy wyświetlaniu na smartfonie.  Nie wiem czy to ma sens ale podzieliłem menu na dwa divy i dalej nic. Czytałem również o media quiries wstawiłem taki znacznik i również nic nie dało. Kombinuję, jednak nic mi nie przychodzi do głowy.

---

span ostylizuj w css. np:  <span class"one">sprzedaj</span><span class"two">pojazd</span> itd. <p>| Profesjonalne zdjęcia samochodów na sprzedaż | Szablony Aukcji |</p>Logo i menu powinny mieć float: left;  WARTOŚCI PROCENTOWE A NIE px

Przeanalizuj ten kod plus css i jeszcze namiastka media queries

<div id="container">
					<div id="logo"> 
								<span class="one">SPRZEDAJ</span><span class="two">POJAZD</span><span class="three">.pl </span>
					<p>| Profesjonalne zdjęcia samochodów na sprzedaż | Szablony Aukcji |</p>
					</div>			
					<div id="nav">					
					<ol>
								<li><a href="index.html">Start </a></li>
								<li><a href="#">  Zdjęcia </a></li>
								<li><a href="#">  Oferta </a>	</li>
								<li><a href="#">  Kontakt </a></li>
								<li><a href="#"><i class="icon-facebook-official"></i> </a></li>				
					</ol>
					</div>	
					<div id="slajder"></div>	
					<div id="footer"> &copy 2016 by Michał Wołoszyn 2016 </div>
	
	</div>

body {
    background-color: #ffffff;
    color: #000000;
    font-family: "Lato",sans-serif;
    font-size: 100%;
}
*{
	box-sizing: border-box;
}
#container {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#logo {
    font-family: "Josefin Sans",sans-serif;
    font-size: 2.2em;
    height: 15%;
    margin-top: 2%;
    text-align: center;
    text-indent: 5%;
    width: 50%;
	float: left;
}
.one{
	color: #000066;
}
.two{
	color: #3333ff;
}
.three{
	color: #800000;
}
#logo p{

	font-size: 0.5em;
}
#nav {
    font-family: "Josefin Sans",sans-serif;
    width: 50%;
	float: left;
	text-align: right;
	margin-top: 5%;
}
ol {
    color: #000000;
    display:inline-block;
    font-size: 1em;
    list-style-type: none;
    text-align: center;
}
ol a {
    color: #000000;
    display: block;
    text-decoration: none;
	width: 70px;
}
ol > li {
    float: left;
    height: 5%;
}
ol > li:hover {
    background-color: #ffffff;
}
ol > li:hover > a {
    color: #4b6db7;
}
#slajder {
    background-color: #4b6db7;
    height: 605px;
    text-align: center;
	clear: both;
}
#footer {
    font-size: 12px;
    height: 18px;
    padding: 7px;
    text-align: center;
}
@media only screen and (max-width: 700px) {
   
        #logo,#nav{
			width: 100%;
			text-align: center;
		}
        #logo{
            font-size: 1.6em;
        }
}