• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z responsywnością

VPS Starter Arubacloud
0 głosów
592 wizyt
pytanie zadane 12 września 2017 w HTML i CSS przez Mateusz Patalan Bywalec (2,140 p.)

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/

1 odpowiedź

0 głosów
odpowiedź 12 września 2017 przez xdmik23 Gaduła (3,000 p.)
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
komentarz 12 września 2017 przez xdmik23 Gaduła (3,000 p.)
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
komentarz 12 września 2017 przez xdmik23 Gaduła (3,000 p.)

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

komentarz 12 września 2017 przez xdmik23 Gaduła (3,000 p.)
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
komentarz 12 września 2017 przez xdmik23 Gaduła (3,000 p.)
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
komentarz 13 września 2017 przez Mateusz Patalan Bywalec (2,140 p.)
@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ść

Podobne pytania

0 głosów
1 odpowiedź 356 wizyt
0 głosów
4 odpowiedzi 628 wizyt

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...