andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header: continue to improve mobile breakpoints

Browse Source
This commit is contained in:
rektdeckard
2020-08-18 14:14:13 -04:00
parent 697ead7113
commit 1b3fde3c30
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Header/Header.css
View File

@@ -16,7 +16,7 @@ header img {
justify-content: flex-start; justify-content: flex-start;
/* gap: 56px; */ /* gap: 56px; */
/* column-gap: 56px; */ /* column-gap: 56px; */
margin: 48px 0; margin: 48px 0 32px;
} }
a.nav-link:not(:last-child) { a.nav-link:not(:last-child) {
@@ -27,6 +27,7 @@ a.nav-link {
text-decoration: none; text-decoration: none;
position: relative; position: relative;
color: black; color: black;
margin-bottom: 16px;
} }
a.nav-link:after { a.nav-link:after {
@@ -66,20 +67,12 @@ a.nav-link:hover:after {
#receipt { #receipt {
position: absolute; position: absolute;
transform: translate(-116px, 136px); transform: translate(-138px, 190px);
} }
#calculator { #calculator {
position: absolute; position: absolute;
transform: translate(724px, 240px); transform: translate(800px, 240px);
}
@media screen and (max-width: 759px) {
.intro h2 {
font-size: 40px;
line-height: 52px;
margin-bottom: 32px;
}
} }
/* Illustrations remain at same layout up to 1024px */ /* Illustrations remain at same layout up to 1024px */
@@ -126,6 +119,11 @@ a.nav-link:hover:after {
position: absolute; position: absolute;
transform: translate(672px, -900px); transform: translate(672px, -900px);
} }
#calculator {
position: absolute;
transform: translate(534px, 240px);
}
} }
@media screen and (min-width: 760px) and (max-width: 1023px) { @media screen and (min-width: 760px) and (max-width: 1023px) {
@@ -179,3 +177,11 @@ a.nav-link:hover:after {
transform: translate(982px, 621px); transform: translate(982px, 621px);
} }
} }
@media screen and (max-width: 759px) {
.intro h2 {
font-size: 28px;
line-height: 38px;
margin-bottom: 32px;
}
}