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

Problem z responsywnością strony.

Object Storage Arubacloud
0 głosów
189 wizyt
pytanie zadane 23 sierpnia 2015 w HTML i CSS przez ignacjusz Bywalec (2,390 p.)

Witam, zrobiłem stronę zgodnie ze wskazówkami na tym blogu: http://devcorner.pl/efekt-parallax/ jednak po dopisaniu odpowiedznich @media i przesłaniu pliku index.html i style.html i wszystkich zdjec oraz po otworzeniu tej strony na telefonie okazało się że strona nie jest responsywna. Mój telefon ma 720px szerokości.

Kod tej strony:

body
{
	background-color: #666666;
	font-family: 'Ubuntu', sans-serif;
	color: #FFFFFF;
	margin: 0 !important;
}

.container
{
  max-width: 90%;
  margin: auto;
}
 
section.module h2
{
  margin-bottom: 20px;
  font-size: 38px;
  color: rgba(204,204,204,1);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
 
section.module p
{
  margin-bottom: 40px;
  font-size: 22px;
  font-weight: 300;
  line-height: 28px; 
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
 
section.module p:last-child
{
  margin-bottom: 0;
}
 
section.module.content
{
  padding: 60px 0;
  text-align: left;
}
 
section.module.parallax
{
  height: 800px;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
}

section.module.parallax h1
{
  color: rgba(255, 255, 255, 0.7);
  font-size: 48px;
  line-height: 800px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin: 0;
}
 
section.module.parallax-1
{
  background-image: url(obraz1.jpg);
}
 
section.module.parallax-2
{
  background-image: url(obraz2.jpg);
}
 
section.module.parallax-3
{
  background-image: url(obraz3.jpg);
}
 
@media (min-width: 1100px)
{
	section.module h2
	{
    font-size: 50px;
    }
 
    section.module p
	{
    font-size: 32px;
    }
	
    section.module.parallax h1
	{
    font-size: 105px;
    }
}

@media (max-width: 1100px)
{
	section.module h2
	{
    font-size: 40px;
    }
 
    section.module p
	{
    font-size: 24px;
    }
	
    section.module.parallax h1
	{
    font-size: 90px;
    }
}

@media (max-width: 950px)
{
    section.module.parallax h1
	{
    font-size: 80px;
    }
}

@media (max-width: 810px)
{
	section.module.parallax h1
	{
    font-size: 70px;
    }
}

@media (max-width: 700px)
{
	section.module.parallax h1
	{
    font-size: 60px;
    }
}

@media (max-width: 600px),  (max-device-width: 730px)
{
    section.module.parallax h1
	{
    font-size: 50px;
    }
 
}

@media (max-width: 500px)
{
    section.module h2
	{
    font-size: 34px;
    }
 
    section.module p
	{
    font-size: 20px;
    }
 
    section.module.parallax h1
	{
    font-size: 40px;
    }
 
}

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style.css">
	
	<meta charset="UTF-8">
	<meta name="description" content="Moja wizytówka w internecie">
	<meta name="keywords" content="Ignacy, Gębuś, wizytówka, programista, strona, internetowa, HTML, CSS, JavaScript, JS">
	<meta name="author" content="Ignacy Gębuś">
</head>
<body>

<section class="module parallax parallax-1">
	<div class="container">
		<h1>Strona główna</h1>
	</div>
</section>
 
<section class="module content">
	<div class="container">
		<h2>Strona główna</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna magna, porta lobortis fermentum sed, cursus quis lectus. Integer scelerisque nisi risus, non volutpat magna volutpat in. Vivamus tempor augue quis semper tincidunt. Aliquam lacinia sit amet urna quis faucibus. Fusce venenatis dui in quam viverra hendrerit. Nunc non interdum dolor. Mauris libero mi, aliquam vestibulum ligula in, vehicula placerat leo. Praesent pharetra, orci a placerat consectetur, metus est pellentesque tellus, vel molestie massa felis gravida nunc. </p>
	</div>
</section>
 
<section class="module parallax parallax-2">
	<div class="container">
		<h1>O mnie</h1>
	</div>
</section>
 
<section class="module content">
	<div class="container">
		<h2>O mnie</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna magna, porta lobortis fermentum sed, cursus quis lectus. Integer scelerisque nisi risus, non volutpat magna volutpat in. Vivamus tempor augue quis semper tincidunt. Aliquam lacinia sit amet urna quis faucibus. Fusce venenatis dui in quam viverra hendrerit. Nunc non interdum dolor. Mauris libero mi, aliquam vestibulum ligula in, vehicula placerat leo. Praesent pharetra, orci a placerat consectetur, metus est pellentesque tellus, vel molestie massa felis gravida nunc. </p>
	</div>
</section>
 
<section class="module parallax parallax-3">
	<div class="container">
		<h1>Oferta</h1>
	</div>
</section>
 
<section class="module content">
	<div class="container">
		<h2>Oferta</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna magna, porta lobortis fermentum sed, cursus quis lectus. Integer scelerisque nisi risus, non volutpat magna volutpat in. Vivamus tempor augue quis semper tincidunt. Aliquam lacinia sit amet urna quis faucibus. Fusce venenatis dui in quam viverra hendrerit. Nunc non interdum dolor. Mauris libero mi, aliquam vestibulum ligula in, vehicula placerat leo. Praesent pharetra, orci a placerat consectetur, metus est pellentesque tellus, vel molestie massa felis gravida nunc. </p>
	</div>
</section>

</body>
</html>

 

1 odpowiedź

+2 głosów
odpowiedź 23 sierpnia 2015 przez Patrycjerz Mędrzec (192,320 p.)
wybrane 23 sierpnia 2015 przez ignacjusz
 
Najlepsza
A gdzie meta z viewport?
komentarz 23 sierpnia 2015 przez ignacjusz Bywalec (2,390 p.)

Zapomniałem, dzięki wink

Podobne pytania

0 głosów
2 odpowiedzi 234 wizyt
0 głosów
0 odpowiedzi 193 wizyt
pytanie zadane 1 października 2016 w HTML i CSS przez Jack9999 Początkujący (300 p.)
0 głosów
1 odpowiedź 344 wizyt
pytanie zadane 16 stycznia 2016 w HTML i CSS przez Kuba Bielawski Obywatel (1,760 p.)

92,626 zapytań

141,488 odpowiedzi

319,852 komentarzy

62,009 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...