Mièrt "rövid" a background a desktop version? Telefonon rendes mi lehet a gond?
*{
box-sizing:border-box;
}
body
{
margin: 0;
padding: 0;
font-family: Arial;
display:flex;
justify-content:center;
align-items:center;
max-width:100vw;
max-height:100vh;
}
section
{
position:relative;
width:100%;
height: 100vh;
background-color: #DAA520;
}
header{
padding: 0 100px;
width: 100%;
height: 80px;
box-sizing:border-box;
background:rgba(255,255,255,.1);
transition:.5s;
}
ul
{
position:relative;
margin: 0;
padding: 0;
display:flex;
float:right;
transition: .5s;
}
ul li
{
list-style:none;
}
ul li a
{
position:relative;
display:block;
padding: 10px 20px;
margin: 20px 0;
text-transform:uppercase;
text-decoration:none;
color:#262626;
font-weight:bold;
transition: .5s;
}
ul li a:hover
{
background: #000;
color:#fff;
}
.toggle
{
display:none;
position:absolute;
right:10px;
top:26px;
background: #f00;
color:#fff;
padding:5px;
cursor: pointer;
font-weight:bold;
}
@media (max-width: 992px)
{
.toggle
{
display:block;
}
header
{
padding:0 0;
background: rgba(255,255,255,.5)
}
header ul
{
width:100%;
top:1px;
display:none;
}
header ul.active
{
display:block;
}
header ul li a
{
margin:0;
display:block;
text-align:center;
color: #ffff;
background:rgba(0,0,0,.5)
}
}
@media only screen and (max-width: 600px) {
text{
font-family:sans-serif;
}
h1{
text-align:center;
font-size:5vw;
margin:0;
padding:0;
}
p{
font-size:1.8vw;
margin:0;
padding-left:30vw;
padding-right:30vw;
text-align:center;
}
}
@media only screen and (min-width: 900px) {
text{
font-family:sans-serif;
}
h1{
text-align:center;
font-size:5vw;
margin:0;
padding:0;
}
p{
font-size:1.8vw;
margin:0;
padding-left:30vw;
padding-right:30vw;
text-align:center;
}
}
@media only screen and (max-width: 600px) {
text{
font-family:sans-serif;
}
fake image{
width:100vw;
margin:0;
height:10%;
padding:0;
}
}
@media only screen and (min-width: 900px) {
fake image{
width:100vw;
height:10%;
margin:0;
padding:0;
}
.responsive
{
overflow:hidden;
padding-bottom:73.333%;
position:relative;
}
.responsive .iframe{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
1. A section-nek ne adj magasságot, hagyd, hogy a tartalom töltse ki.
2. A responsive div-nél mi ez a padding-bottom: 73.333% ?? Ez tolja fel az egész tartalmat.
3. A body-nál a max-width: 100vw és a max-height: 100vh nem kell, mindkettőt nyugodtan dobd ki. A max-height: 100vh nem azt jelenti, amire te gondolsz. Úgy eleve a vw-t és a vh-t elfelejtheted, nagyon ritkán használjuk őket, nem igen van rájuk szükség.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!