Problem z responsywnością

Question

Kiedy testowałem stronę na komputerze, przesuwając okno przeglądarki wszystko świetnie wyglądało - nic na siebie nie nachodziło  i ogólnie, wyglądało pięknie.

Ale kiedy wszedłem na stronkę na telefonie, wszystko zaczęło wyglądać źle: Co najważniejsze, włączył się Layout przewidziany dla tabletów.

Czy ktoś wie, co powinienem zrobić?

Link: http://star-wars-blog.wex.pl/

Answer 1

sprobuj otworzyc strone np.: w chromie,kliknij ppm i nacisnij zbadaj,nastepnie znajdz tryb responsywny i tam zobacz czy wszystko jest ok. Samo zmniejszanie okna przegladarki nie zawsze daje pewnosc ze wszystko jest ok

Comments

sprawdzilem i u mnie wszytsko jest ok-zarowno w trybie responsywnym na kompie jak i telefonie wszystko dziala tak samo.Moze masz przegladarke do kitu albo jakis wirus czy jeszcze cos innego. Generalnie jesli na kompie w trybie responsywnym wszystko dziala to na telefonie nie powinno byc problemow o ile przegladarka obsluguje kod,ktorego uzyles

---

a czy czasem nie masz w ustawieniach wlaczonej wersji dla komputerow?

---

jedyne co mnie niepokoi to fakt,ze w tescie strony wyszlo ze poziom wygody dla urzadzen mobilnych to tylko 70 procent i jak na strone responsywna to troche malo. Moze masz gdzies jakis blad,ktory powoduje ze strona na jednych przegladarkach dziala,na innych nie

---

juz widze,po przejsciu w tryb responsywny po chwili wyglad strony sie zmienia.Musizz chyba pokazac kod,albo sprobuj wczesniej pokombinoac  wkodzie css,bo tam tkwi przyczyna.Zapewne to kwestia pobawienia sie w position

---

@media (max-width: 500px)
{
	.row
	{
		width:90%;
	}
	.post
	{
		width:100%;
		height: 700px;
		padding:0;
	}
	.post img
	{
		height:20vh;
	}
	.menu
	{
		display:none;
	}
	.container
	{
		width:100%;
	}
	.logo
	{
		width:90%;
	}
	.logo h1
	{
		text-align:center;
		font-size:35px;
	}
	label {
        display: block;
        cursor: pointer;
    }
    .responsive-menu
    {
    	display:block;
    }
    #menu 
    {
        display: none;
    }
    #menu a {
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
     
    }
    #toggle:checked + #menu {
        display: block;
    }
    .footer-row
    {
    	width:95%;
    }
    .container ul li
    {
    	display:none;
    }
    .social-links
    {
    	float:left;
    }
    .social-links span
    {
    	font-size:25px;
    }
    /* Article*/
    .row
    {
    	width:90%;
    }
    .article
    {
    	width:100%;
    }
    .aside
    {
    	width:100%;
    }
    /* ENDArticle*/
}
@media (min-width: 500px) and (max-width: 1150px)
{
	.row
	{
		width:90%;
	}
	.post
	{
		width:50%;
		height:600px;
	}
	.post img
	{
		height:20vh;
	}
	.menu
	{
		display:none;
	}
	.container
	{
		width:100%;
	}
	.logo
	{
		width:90%;
	}
	.logo h1
	{
		text-align:center;
		font-size:35px;
	}
	label {
        display: block;
        cursor: pointer;
    }
    .responsive-menu
    {
    	display:block;
    }
    #menu 
    {
        display: none;
    }
    #menu a 
    {
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
     
    }
    #toggle:checked + #menu 
    {
        display: block;
    }
    .footer-row
    {
    	width:95%;
    }
     /* Article*/
    .row
    {
    	width:90%;
    }
    .article
    {
    	width:100%;
    }
    .aside
    {
    	width:100%;
    }
    .author img
    {
 		width:10%;
    }
    /* ENDArticle*/
}

To cały kod, odpowiedzialny za responsywność