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>