Kezdőoldal » Számítástechnika » Weblapkészítés » Mièrt "rövid" a background a...

Mièrt "rövid" a background a desktop version? Telefonon rendes mi lehet a gond?

Figyelt kérdés

2020. jún. 3. 12:39
 1/7 A kérdező kommentje:

*{

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;

}

2020. jún. 3. 12:43
 2/7 A kérdező kommentje:
position: 100vh a rossz csak nem tdom miért
2020. jún. 3. 12:48
 3/7 anonim ***** válasza:
100%
Tessék a HTML és CSS kódot egy kódmegosztó oldalra - jsbin, jsfiddle, codepen - feltölteni, mert gy áttekinthetetlen az egész.
2020. jún. 3. 13:19
Hasznos számodra ez a válasz?
 4/7 A kérdező kommentje:
codepenbe be irtam mentettem hogy küldjem el?
2020. jún. 3. 13:25
 5/7 A kérdező kommentje:
2020. jún. 3. 13:27
 6/7 anonim ***** válasza:

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.

2020. jún. 3. 13:54
Hasznos számodra ez a válasz?
 7/7 A kérdező kommentje:
Köszönöm
2020. jún. 3. 14:08

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

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!