AM-WEB/floorithardwoodfloors.com
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix contact form styles + narrow screen nav clipping

Browse Source 
- Alias .form-group to .form-field in main.css so contact form inputs get full styling
- Hide header Get Estimate btn on <=480px (mobile drawer has CTA, prevents logo+btn+hamburger overflow)
- Tighten header-inner gap to space-4 on <=480px
- Drop redundant btn-sm padding override from 360px rule (btn now hidden at that width)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Concept Agent
2026-05-31 15:39:47 +02:00
parent 93a0837563
commit b94b66205f
2 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/components.css
+7 -5
View File
@@ -1479,12 +1479,14 @@ details.faq-item p {
.header-logo-sub { display: none; } .header-logo-sub { display: none; }
} }
/* Ultra-narrow phones (iPhone SE portrait, 320px) : tighten header */ /* Narrow phones: drop Get Estimate btn, hamburger + logo only */
@media (max-width: 360px) { @media (max-width: 480px) {
.header-cta .btn--sm { .header-cta .btn--sm { display: none; }
padding-inline: 0.75rem; .header-inner { gap: var(--space-4); }
font-size: 0.75rem;
} }
/* Ultra-narrow phones (320px) */
@media (max-width: 360px) {
.header-logo img { height: 36px !important; } .header-logo img { height: 36px !important; }
.container { padding-inline: 0.875rem; } .container { padding-inline: 0.875rem; }
} }
assets/css/main.css
+18 -7
View File
@@ -238,13 +238,15 @@ p { max-width: 68ch; }
} }
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.form-field { .form-field,
.form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-2); gap: var(--space-2);
} }
.form-field label { .form-field label,
.form-group label {
font-size: var(--text-sm); font-size: var(--text-sm);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@@ -253,7 +255,10 @@ p { max-width: 68ch; }
.form-field input, .form-field input,
.form-field textarea, .form-field textarea,
.form-field select { .form-field select,
.form-group input,
.form-group textarea,
.form-group select {
width: 100%; width: 100%;
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
background: var(--white); background: var(--white);
@@ -268,15 +273,21 @@ p { max-width: 68ch; }
.form-field input:focus, .form-field input:focus,
.form-field textarea:focus, .form-field textarea:focus,
.form-field select:focus { .form-field select:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--amber); border-color: var(--amber);
box-shadow: 0 0 0 3px rgba(200,139,42,0.15); box-shadow: 0 0 0 3px rgba(200,139,42,0.15);
} }
.form-field input.valid { border-color: #2d9e57; } .form-field input.valid,
.form-field input.invalid { border-color: #c0392b; } .form-group input.valid { border-color: #2d9e57; }
.form-field input.invalid,
.form-group input.invalid { border-color: #c0392b; }
.form-field textarea { .form-field textarea,
.form-group textarea {
min-height: 130px; min-height: 130px;
resize: vertical; resize: vertical;
} }