* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
position: relative;
height: 100vh;
background-color: #3c3333;
overflow: hidden;
}
header > * {
position: absolute;
}
.bee {
height: 50%;
top: 45%;
left: 17%;
}
.welcome {
z-index: 1;
top: 5%;
left: 5%;
right: 5%;
text-align: center;
font-family: 'Saira Extra Condensed', sans-serif;
font-weight: bold;
font-size: 40px;
text-transform: uppercase;
color: aliceblue;
}
header h2 {
font-size: 20px;
font-weight: 20px;
}
header h1 {
text-align: center;
font-family: 'Saira Extra Condensed', sans-serif;
font-weight: bold;
font-size: 20px;
}
header button {
line-height: 32px;
padding: 0 20px;
text-transform: uppercase;
font-family: 'Saira', sans-serif;
font-size: 12px;
font-weight: 300;
background-color: transparent;
color: aliceblue;
border: 2px solid aliceblue;
letter-spacing: 2px;
}
@media (orientation: landscape) {
.welcome {
left: -50%;
top: 20%;
}
}
.bee {
height: 80%;
left: 50%;
top: 10%;
}
}
@media (orientation: portrait) and (min-width:360px) {
.welcome {
font-size: 50px;
top: 2%;
}
.bee {
left: 13%;
}
header h2 {
font-size: 34px;
}
header h1 {
font-size: 34px;
}
header button {
font-size: 17px;
}
@media (orientation: portrait) and (min-width:768px) {
.welcome {
top: 10%
}
.bee {
left: 23%
}
}
problem w tym że działa mi tylko pierwsze @media każdego poźniejszego przeglądarka nie widzi np jak dam ostanie @media na początek to tylko to działa a jak jest z tyłu to przeglądarka nie czyta :C