Responzivitásba egy kis segítség?

* { padding: 0; margin: 0; border: 0; }

body {

background: url('akarmi.jpg'); /* kép VAGY ha nincs akkor háttérszín beállítása */

background-repeat: no-repeat;

background-attachment: fixed;

background-size: auto;

font-family: arial;

font-size: 100%;

color: #FFB900;

}

a { color: #FFB400; }

.clear { clear: both; }

#wrapper {

width: 800px;

margin: 20px auto; /* az auto beállítással fogja középre rendezni a tartalmat */

border-radius: 10px; /* keret lekerekítés */

}

header { /* oldal fejléce */

font-size: 600%; /* kb 40pt betűméret */

font-weight: bold; /*félkövér megjelenítés*/

color: #fff;

font-family: "trebuchet MS";

text-shadow: 2px 2px 2px #6d2a15; /* szöveg árnyékolása x és y irányú eltolást a 3. érték a halványítás a végén pedig az árnyék színét állíthatjuk be */

}

span { color: #ff3333; } /* fejlécen belüli tartalom amire a szűlő beállítás is vonatkozik (minden másra is) */

footer { /* oldal lábléce */

width: 1000px; /* elvesz az oldal szélességéből */

margin: 20px auto; /* szintén középre igazítva az auto miatt */

font-size: 85%; /* betűméret nem az alapértelmezett 12pt */

background: rgba(129,63,21,0.5); /* a 4. érték az átlátszóság ami 0 és 1 közötti érték lehet */

padding: 20px; /* kereten belüli belső margó */

text-align: center;

}

footer a { margin: 0 15px; } /* felső és alsó nulla a bal és a jobb 15px a hivatkozások egymástól való távolsága */

nav {

width: 1000px;

padding: 10px 0;

margin: 20px 0;

color: #99080c;

box-shadow: 0px 0px 5px #99080c; /* tartalomdoboz árnyékolása */

background: #99080c;

background: -moz-linear-gradient(top, #ffb400 0%, #ff8500 100%); /* mozila böngészőben zárójelben felülről indítva (top), kezdőszín 0% azaz azonnal indítva ezzel, a végső szín és a 100% a záró érték lesz */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb400), color-stop(100%,#ff8500));

background: -webkit-linear-gradient(top, #ffb400 0%,#ff8500 100%);

background: -o-linear-gradient(top, #ffb400 0%,#ff8500 100%);

background: -ms-linear-gradient(top, #ffb400 0%,#ff8500 100%);

background: linear-gradient(to bottom, #702010 0%,#ff1010 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb400', endColorstr='#ff8500',GradientType=0 );

}

nav a {

color: #000;

text-decoration: none;

margin: 0 10px;

font-family: "trebuchet MS";

}

nav a:first-child { margin-left: 20px; } /* a menüben található hivatkozások közül az első elem */

nav a:hover { text-decoration: underline; } /* hover jelentése, hogy ha fölé megyünk akkor aktiválódik */

section {

width: 800px;

float: left;

margin: 0 20px 0 0;

padding: 0 20px 0 0;

font-size: 80%;

}

section article { margin: 0 0 20px 0; }

section article p {

text-align: justify; /* sorkizárt igazítás */

line-height: 140%; /* sor magasság */

}

section article h1 {

margin: 0 0 10px 0;

font-size: 150%;

color: #ffb400;

font-family: "trebuchet MS";

text-shadow: 1px 1px 1px #6d2a15; /* szöveg árnyékolása */

}

aside {

float: left;

width: 200px;

font-size: 80%;

}

figure {

padding: 10px;

background: #99080c;

margin: 0 0 40px 0;

}

figure img { max-width: 100%; } /* maximum 100% szélesség lehet */

figure figcaption {

font-style: italic;

font-size: 80%;

margin: 6px 0 0 0;

}

iframe{ width: 780px; height: 400px;}

/*innen kezdődik a reszponzív értékadás */

@media only screen

and (min-width: 800px)

(max-width: 1200px) {

div#wrapper { width: 800px; }

header { font-size: 320%; }

section { width: 408px; }

aside { width: 150px; }

}

@media only screen

and (min-width : 600px) /* a böngészőnk szélességét határozzuk itt meg minimum és maximum mekkora lehet */

and (max-width : 800px) {

div#wrapper { width: 800px; }

header { font-size: 320%; }

section { width: 408px; }

aside { width: 150px; }

footer { width: 560px; }

iframe {width: 380px; }

}

@media only screen

and (min-width : 480px)

and (max-width : 600px) {

div#wrapper { width: 480px; }

header { font-size: 250%; }

section { width: 315px; padding-right: 3px; }

aside { width: 157px; padding-left: 3px}

footer{ width: 440px}

iframe {width: 300px; }

}

@media only screen

and (min-width : 320px)

and (max-width : 480px) {

div#wrapper { width: 320px; }

header { font-size: 150%; }

a{ font-size: 80%}

section { width: 320px; padding: 0; margin: 0; border: 0; }

aside { display: none; } /* az aside rész megjelenését letiltottuk */

footer { width: 280px; }

iframe {width: 300px; }

}

@media only screen

and (min-width: 240px)

and (max-width: 320px) {

div#wrapper { width: 240px; }

header { font-size: 300%; text-align: center; }

header span { display: block; } /* ez fogja sortöréssel a következő sorba rakni a tartalmat */

a{ font-size: 80%}

nav { text-align: center; }

nav a { margin: 0 2px; }

nav a:first-child { margin: 0 2px; }

section { width: 240px; padding: 0; margin: 0; border: 0; }

aside { display: none; }

footer { display: none; }

iframe {width: 220px; }

}

div{

margin: 0 auto;

}

span{color:coral}

az előző a css ez itt meg a html (index)

<!DOCTYPE html>

<html lang="hu">

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="stilus2.css">

<title>Videójátékok wboldala</title>

<META NAME=”viewport” CONTENT=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /> <!-- eszköz szélesség, kezdeti zoom, max zoom és a felhasználó nem zoomolhatja -->

</head>

<body>

<div>

<div id="wrapper">

<header> <!-- fejlécet így is használhatunk -->

<span><center>Videójátékok</center></span>

<!-- span: egy plusz tulajdonsággal láthatjuk el az adott szöveget ami benne van -->

</header>

<center>

<nav style="width: 800px"> <!-- <div id="menu"> helyett használhatjuk ezt is akár -->

<center>

<a href="jatekok.html">Játékok</a> •

<a href="galeria.html">Galéria</a> •

<a href="tudok.html">Tudok ilyet is</a> •

<a href="rolam.html">Rólam</a>

</center>

</nav>

</center>

<section> <!-- div id="tartalom"-->

<article> <!-- div class="kis_resz"-->

<h1>2017 legjobbjai</h1>

<figure> <!--képek elhelyezésénél használhatjuk és ezen belül van a kép (img) és a képaláírás (figcaption) is-->

<img src="top20.jpg" alt="top20"/>

<figcaption>

2017 legkelendőbb játékai.

</figcaption>

</figure>

<p>Kezdeném azzal, hogy a PLAYERUNKNOWN'S BATTLEGROUNDS másnéven 'PUBG' hatalmas népszerűségre tett szert az év első felében letaszítva az előtte lévő dobogós helyezetett ami pedig nem más,

mint a Counter-Strike: Global Offensive.[Cs:Go] A Cs:Go-t az idén rengeteg játékos hagyta ott és főként a PUBG-t okolja a Valve illetve az emberek egy része. A dobogos 3. helyezette pedig

nem más, mint a Dota2 ami egy ingyenes moba játék egy jó ideje népszerű már. Meglepetésre a Grand Theft Auto 5 [GTA5] nem fért fel a dobogóra és a negyedik helyet foglalja el. Az 5. a listán a

Tom Clancy's Rainbow Six Siege [R6] szintén nagy népszerűségre tett szert. Ezután megint egy ingyenes játék következik ami nem más mint a Team Fortress2 . [TF2] Éppen csak egy hangyányival van

lemaradva tőlle az ARK:Survival Evoled. [ARk] Utána egy ingyenes játék a nyomában még pedig A Warframe. </p>

</article>

<article>

<h1>A világ legnagyobb játékbázisa</h1>

<figure> <!--képek elhelyezésénél használhatjuk és ezen belül van a kép (img) és a képaláírás (figcaption) is-->

<strong>

<p>Steam Trailer</p><BR/>

<iframe src="https://www.youtube.com/embed/EFrL6-OhN94" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</strong>

<figcaption>

<!-- -->

<h3><a href="https://www.youtube.com">YouTube</a> </h3>

</figcaption>

</figure>

<p>A steamen szinte biztos, hogy minden játékos talál valamit amivel kedvére játszhat a milliónyi játékok közül. Vannak ingyenes illetve fizetős Programok is amit bankkártyával/feltöltőkártyával ki fizetve azonnal hozzájutunk a játékhoz.</p>

</article>

</section>

<aside> <!-- ez is egyenrangú a többivel és css-sel igazítható -->

<center>Minden jog fenntartva! ©</center>

</aside>

<div class="clear"></div>

</div>

<footer>

<a href="mi.html">Mi célt szolgál ez a weboldal?</a>

</footer>

</div>

</body>

</html>