Add media queries to public.css to match original design
This commit is contained in:
parent
1f9668104e
commit
ac46759df4
|
@ -242,7 +242,7 @@ nav a {
|
|||
min-height: 6rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
column-gap: 5rem;
|
||||
gap: 5rem;
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
|
@ -288,7 +288,7 @@ nav a {
|
|||
|
||||
.nature div + div {
|
||||
display: flex;
|
||||
column-gap: 5rem;
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.nature section {
|
||||
|
@ -369,13 +369,13 @@ nav a {
|
|||
|
||||
.environment .slick-arrow {
|
||||
font-size: 6rem;
|
||||
line-height: 1;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: none !important;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.5s ease;
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.environment .slick-prev.slick-arrow, .environment .slick-next.slick-arrow {
|
||||
|
@ -384,6 +384,7 @@ nav a {
|
|||
|
||||
.environment .slick-prev {
|
||||
order: 2;
|
||||
margin: 2.5rem 4rem 0 0;
|
||||
}
|
||||
|
||||
.environment .slick-prev:hover {
|
||||
|
@ -392,6 +393,7 @@ nav a {
|
|||
|
||||
.environment .slick-next {
|
||||
order: 3;
|
||||
margin: 2.5rem 7rem 0 0;
|
||||
}
|
||||
|
||||
.environment .slick-next:hover {
|
||||
|
@ -402,6 +404,7 @@ nav a {
|
|||
font-weight: 900;
|
||||
font-size: calc(1.8rem + 8vw);
|
||||
line-height: 1.2em;
|
||||
margin: 10rem 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
@ -409,3 +412,23 @@ footer {
|
|||
text-align: center;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 64rem) {
|
||||
.nature div + div {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nature section {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.nature div:first-child {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nature h2 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue