diff --git a/src/components/Contact/contact.scss b/src/components/Contact/contact.scss index 88d9928..01b1871 100644 --- a/src/components/Contact/contact.scss +++ b/src/components/Contact/contact.scss @@ -6,16 +6,15 @@ place-items: center; align-content: center; - /* FIX 1: Push the content down below the navbar, and pull it up from the footer */ - padding-top: 8rem; + /* FIX 1: Reduced padding-top to bring the header up */ + padding-top: 5rem; padding-bottom: 6rem; h1 { - /* FIX 2: Shrink the massive desktop font size */ font-size: 4rem; text-align: center; + margin-bottom: 0.5rem; /* Keeps it snug to the first list */ - /* FIX 3: Shrink it even more on mobile phones */ @media (max-width: 768px) { font-size: 2.5rem; } @@ -31,19 +30,19 @@ h2 { font-size: 2.5rem; - margin-top: 4rem; + margin-top: 3.5rem; /* Pulled up slightly */ margin-bottom: 1.5rem; text-align: center; color: $dark; - /* Make the subheader a bit smaller on mobile too */ @media (max-width: 768px) { font-size: 2rem; } } ul { - row-gap: 1rem; + /* FIX 2: Switched to standard gap for perfectly even spacing */ + gap: 0.75rem; display: flex; flex-direction: column; align-items: flex-start; @@ -53,6 +52,9 @@ padding: 0; li { + margin: 0; /* Resets any default browser margins */ + padding: 0; + a { display: flex; align-items: center; @@ -61,7 +63,6 @@ color: $dark; font-size: 1.5rem; - /* Prevent long emails from breaking off the edge of small phone screens */ @media (max-width: 768px) { font-size: 1.15rem; } @@ -69,9 +70,12 @@ svg { color: $dark; width: 24px; - height: auto; - flex-shrink: 0; /* Prevents the icon from squishing if text wraps */ + /* FIX 3: Force exact height so FB/IG icons match the Mail icon */ + height: 24px; + flex-shrink: 0; + display: block; /* Removes weird invisible text baselines */ } + &:hover { border-bottom: 2px solid $dark; }