mark
/
msos
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile top spacing (double header offset) + CTA/newsletter gap 

On mobile, body already has padding-top:60px to clear the fixed header, but
every page ALSO added its own clearance — doubling it and leaving a ~60px
white gap under the menu (content sat too low). Trimmed each page's mobile
top offset so it relies on the body padding (matching .article-page, which
was already correct): page-content, support/hub/legal pages, and the
news-hub / news-article / blog / member heroes. Content now sits ~32-42px
under the header.

Also add a 32px top gap to .newsletter-cta on mobile so it no longer
touches the CTA/content above it.

CSS only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskik 2026-08-03 01:31:49 +02:00
parent 04f7653001
commit 7c32f416f5
8 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/pages/_article.css
View File

@ -605,7 +605,8 @@
}
.newsletter-cta {
padding: 0 24px 64px 24px;
/* top gap so the box doesn't touch the CTA/content above it on mobile */
padding: 32px 24px 64px 24px;
}
.newsletter-cta .container {

2
css/pages/_blog.css
View File

@ -193,7 +193,7 @@
.blog-feat--lg .blog-feat-thumb { min-height: 200px; }
}
@media (max-width: 768px) {
.blog-hero { padding: 92px 20px 32px; }
.blog-hero { padding: 32px 20px 32px; } /* body offsets the fixed header on mobile */
.blog-hero h1 { font-size: 30px; }
.blog-grid { columns: 1; }
}

2
css/pages/_hub.css
View File

@ -110,7 +110,7 @@
/* ---------- Mobile ---------- */
@media (max-width: 768px) {
.hub-page { padding-top: 60px; }
.hub-page { padding-top: 0; } /* body already offsets the fixed header on mobile */
.hub-hero { padding: 40px 20px 32px; }
.hub-hero h1 { font-size: 32px; }
.hub-lead { font-size: 17px; line-height: 27px; }

5
css/pages/_legal.css
View File

@ -37,6 +37,11 @@
.legal-note { font-size: 13px; line-height: 20px; color: #667085; text-align: center; margin: 4px auto 0; max-width: 640px; }
.legal-note a { color: #2D738C; font-weight: 500; }
@media (max-width: 768px) {
/* body already offsets the fixed header on mobile — avoid a double gap. */
.legal-page { padding-top: 0; }
.legal-hero { padding-top: 32px; }
}
@media (max-width: 600px) {
.legal-hero h1 { font-size: 30px; }
.legal-row { flex-direction: column; gap: 2px; }

4
css/pages/_member.css
View File

@ -233,6 +233,10 @@
.mm-hero-collage { height: 340px; }
.mm-who { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
/* body already offsets the fixed header on mobile — trim the hero's top. */
.mm-hero { padding-top: 40px; }
}
@media (max-width: 600px) {
.mm-h2 { font-size: 26px; }
.ms-grid, .ms-paths { grid-template-columns: 1fr; }

4
css/pages/_news.css
View File

@ -104,7 +104,7 @@
}
@media (max-width: 768px) {
.newshub-hero { padding: 92px 20px 32px; }
.newshub-hero { padding: 32px 20px 32px; } /* body offsets the fixed header on mobile */
.newshub-hero h1 { font-size: 30px; }
}
@ -136,7 +136,7 @@
.news-article-cta { display: inline-block; margin-top: 12px; }
@media (max-width: 768px) {
.news-article { padding: 92px 20px 48px; }
.news-article { padding: 32px 20px 48px; } /* body offsets the fixed header on mobile */
.news-article h1 { font-size: 28px; }
.news-article-body p { font-size: 17px; line-height: 28px; }
}

4
css/pages/_projects.css
View File

@ -316,7 +316,9 @@
@media (max-width: 768px) {
.page-content {
padding-top: 60px; /* Prilagoditev za fiksno glavo */
/* body already has padding-top:60px on mobile for the fixed header,
so no extra offset here (avoids a double gap under the menu). */
padding-top: 0;
}
.page-header-section {

2
css/pages/_support.css
View File

@ -115,7 +115,7 @@
/* ---------- Mobile ---------- */
@media (max-width: 768px) {
.support-page { padding-top: 60px; }
.support-page { padding-top: 0; } /* body already offsets the fixed header on mobile */
.sup-hero { padding: 40px 20px 32px; }
.sup-hero h1 { font-size: 32px; }
.sup-lead { font-size: 17px; line-height: 27px; }