Skip to content

Fix mobile compatibility: viewport meta, hide TOC on small screens, r… #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aravindputrevu merged 4 commits into from
Jan 5, 2026
Merged

Fix mobile compatibility: viewport meta, hide TOC on small screens, r… #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f7e8e1c
Fix mobile compatibility: viewport meta, hide TOC on small screens, r…
aravindputrevu Jan 5, 2026
477018b
Add comprehensive mobile breakpoints and touch target accessibility
aravindputrevu Jan 5, 2026
cc88e63
Fix navbar overlap on iPhone-sized screens with tighter mobile breakp…
aravindputrevu Jan 5, 2026
07f965d
Remove unused styles and components from CSS for a cleaner codebase
aravindputrevu Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/post-images/gatsby-to-astro-with-claude-code/claude-code-mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/post-images/gatsby-to-astro-with-claude-code/dead-code-traycer.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 69 additions & 0 deletions src/components/astro/Nav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@

.navbar .flex {
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}

.navbar a {
Expand All @@ -68,6 +70,8 @@
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}

.navbar a.brand:hover {
Expand All @@ -94,4 +98,69 @@
#dark-mode-button:hover {
opacity: 0.7;
}

/* Mobile touch targets */
@media screen and (max-width: 600px) {
.nav-links {
gap: 0.5rem;
}

.nav-links a {
padding: 0.4rem;
min-height: 44px;
display: flex;
align-items: center;
font-size: 0.85rem;
}

#dark-mode-button {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}

@media screen and (max-width: 480px) {
.nav-links {
gap: 0.25rem;
}

.nav-links a {
padding: 0.3rem;
font-size: 0.8rem;
}

.navbar a.brand {
font-size: 0.9rem;
}

#dark-mode-button {
min-width: 40px;
min-height: 40px;
padding: 0;
}
}

@media screen and (max-width: 375px) {
.nav-links {
gap: 0.15rem;
}

.nav-links a {
padding: 0.25rem;
font-size: 0.75rem;
}

.navbar a.brand {
font-size: 0.85rem;
}

#dark-mode-button {
min-width: 36px;
min-height: 36px;
font-size: 0.9rem;
}
}
</style>
2 changes: 1 addition & 1 deletion src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const {
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

viewport meta tag syntax initial-scale viewport-fit cover MDN best practices

💡 Result:

Short summary + MDN best practices:

  • Syntax (canonical example):

    Use a comma/space/semicolon-delimited list of key=value tokens (browsers accept commas, spaces, semicolons). [1][2]

  • Common properties:

    • width (e.g. device-width) — sets layout viewport width. [1]
    • initial-scale — initial zoom level (1 = no zoom). [1]
    • minimum-scale / maximum-scale / user-scalable — control zoom behavior (avoid disabling zoom for accessibility). [1]
    • viewport-fit — auto | contain | cover (use cover to allow content into display cutout area; pair with safe-area insets). [2]

  • viewport-fit=cover best practice:

    • When using viewport-fit=cover, apply CSS padding/margins using the safe-area inset environment variables so important UI doesn’t sit under notches/rounded corners:
      padding-top: env(safe-area-inset-top);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
      This ensures content remains visible on devices with display cutouts. [2]

  • Accessibility & responsiveness rules of thumb:

    • Include the viewport meta on mobile-first responsive sites: content="width=device-width, initial-scale=1". [1]
    • Do not set a fixed pixel width unless necessary; prefer device-width or responsive CSS. [1]
    • Avoid preventing user zoom (user-scalable=no or maximum-scale=1) because it harms accessibility. [1]

Sources:
[1] MDN — Using the viewport meta tag / Viewport meta element. (devdoc.net).

Citations:

Solid mobile viewport setup! 🎉 The initial-scale=1 and viewport-fit=cover combo is definitely the way to go for modern mobile experiences.

Here's the thing though—when you use viewport-fit=cover, you gotta pair it with the CSS safe-area insets to keep your content out of those notches. Otherwise, important UI can get hidden under the display cutout. Just add something like:

padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);

This way, you get the best of both worlds—your content extends into the safe area where it makes sense, but critical UI stays visible. Good practice to implement this wherever you're using viewport-fit=cover. Let me know how that goes!

🤖 Prompt for AI Agents 
In src/layouts/BaseLayout.astro around line 23, the meta tag uses
viewport-fit=cover but there is no CSS to account for device safe-area insets,
which can let content be hidden under notches; add CSS on the top-level
layout/container (and any fixed headers/footers) that applies padding-top,
padding-right, padding-bottom, and padding-left using env(safe-area-inset-top),
env(safe-area-inset-right), env(safe-area-inset-bottom), and
env(safe-area-inset-left) respectively (with sensible fallbacks if desired), so
UI is pushed inside safe areas when present.


<!-- Preconnect to Google Fonts for faster loading -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
Expand Down
25 changes: 25 additions & 0 deletions src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,4 +167,29 @@ const timeline = [
min-width: auto;
}
}

/* Mobile optimizations */
@media screen and (max-width: 600px) {
.about {
padding: 1.5rem 1rem 0;
}

.timeline-item {
gap: 1rem;
}

.timeline-item .year {
min-width: 70px;
}
}

@media screen and (max-width: 480px) {
.about {
padding: 1.25rem 0.875rem 0;
}

.connect .links {
gap: 1rem;
}
}
</style>
33 changes: 33 additions & 0 deletions src/pages/blog.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,4 +123,37 @@ const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
font-size: 1.8rem;
}
}

/* Mobile optimizations */
@media screen and (max-width: 600px) {
.brutalist-page {
padding-top: 1.5rem;
}

.page-header h1 {
font-size: 1.3rem;
}

.post-date {
min-width: 3.5rem;
}

.post-list li {
gap: 1rem;
}
}

@media screen and (max-width: 480px) {
.brutalist-page {
padding-top: 1.25rem;
}

.page-header h1 {
font-size: 1.2rem;
}

.post-date {
font-size: 0.8rem;
}
}
</style>
33 changes: 33 additions & 0 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,4 +112,37 @@ const sortedPosts = allPosts.sort((a, b) => {
padding-top: 3rem;
}
}

/* Mobile optimizations */
@media screen and (max-width: 600px) {
.home {
padding: 1.5rem 1rem 0;
}

.intro {
font-size: 0.9rem;
}

.links {
font-size: 0.85rem;
}

.posts a {
font-size: 0.9rem;
}
}

@media screen and (max-width: 480px) {
.home {
padding: 1.25rem 0.875rem 0;
}

.intro {
font-size: 0.875rem;
}

.posts li {
padding: 0.25rem 0;
}
}
</style>
Loading