Optimizing Mobile Styles for Astro Blog

In the modern web development landscape, ensuring a consistent and high-quality user experience across devices is paramount. This article details the recent optimization efforts undertaken to align the mobile interface of this blog with its desktop counterpart. By refining spacing, proportions, and visual feedback, we’ve created a seamless experience for users on any device.

Below is a detailed walkthrough of the changes made to each component.

1. Global Responsive Spacing

File: src/components/GlobalStyles.astro

The foundation of the optimization involved redefining global padding variables. Mobile screens need less padding to maximize content area, while desktop screens benefit from more whitespace.

We updated the main content padding to be responsive:

/* Before: Fixed padding for all screens */
main, .content, .post-body, article {
  padding: 2rem;
}

/* After: Responsive padding */
main, .content, .post-body, article {
  padding: 1.25rem; /* Smaller padding for mobile */
}

@media (min-width: 768px) {
  main, .content, .post-body, article {
    padding: 2rem; /* Restore larger padding for tablet/desktop */
  }
}

2. Banner Proportions and Typography

File: src/components/Banner.astro

The homepage banner serves as the visual anchor. On mobile, the default height and text sizes were too small. We increased the banner height and implemented progressive font scaling using Tailwind’s responsive prefixes.

Banner Height

We adjusted the height calculation to give the banner more presence on mobile:

<!-- Before -->
<div class="banner h-[calc(var(--banner-height)*3/4)] lg:h-[var(--banner-height)] ...">

<!-- After: Increased mobile height factor to 0.85 -->
<div class="banner h-[calc(var(--banner-height)*0.85)] lg:h-[var(--banner-height)] ...">

Typography Scaling

We updated the title and subtitle classes to scale progressively from mobile to desktop sizes:

/* Title Styles */
.title-index {
  /* Mobile: 5xl, Tablet: 6xl, Desktop: 8xl */
  @apply mb-0 text-5xl leading-[4rem] md:text-6xl md:leading-[5rem] lg:mb-1 lg:text-8xl;
}

.title-normal {
  /* Mobile: 2xl, Tablet: 3xl, Desktop: 5xl */
  @apply mb-1 text-2xl md:text-3xl lg:text-5xl;
}

/* Subtitle Styles */
.subtitle {
  /* Mobile: lg, Tablet: xl, Desktop: 3xl */
  @apply mt-2 text-center text-lg text-[var(--subtitle-color)] drop-shadow-md md:mt-3 md:text-xl lg:mt-4 lg:text-3xl;
}

3. Post Card Redesign

File: src/components/PostCard.astro

The post card needed significant restructuring to look good on mobile. We moved to a full-width vertical layout and increased the size of the cover image.

Layout & Shadow

We removed horizontal margins on mobile and added shadow/hover effects for depth:

<!-- Container -->
<div
  class="flex flex-col rounded-3xl bg-[var(--card-color)] lg:h-[212px] overflow-hidden shadow-sm hover:shadow-md transition-shadow"
>
  <!-- Mobile Cover Image Link -->
  <a
    href={contentUrl}
    class="relative h-[160px] transition-all hover:brightness-75 lg:hidden"
  >
    <!-- ... image content ... -->
  </a>

Image Height

We increased the mobile cover image height to 160px (up from 128px) and the content container height to 140px to allow for more text visibility.

<!-- Mobile Cover Image -->
<a class="relative h-[160px] ... lg:hidden">...</a>

<!-- Content Container -->
<div class="flex h-[140px] flex-row items-stretch lg:h-[212px]">...</div>

4. Unified Typography in Markdown

File: src/components/Markdown.astro

To ensure a continuous reading experience, we standardized the prose size. Previously, mobile used prose-sm which was often too small.

<!-- Before -->
<div class="prose prose-sm lg:prose-base ...">

<!-- After: Use base size for all devices -->
<div class="prose prose-base ...">

5. Mobile Footer Widgets

File: src/components/Footer.astro

On mobile, sidebar widgets (Owner Info, Categories, Tags) move to the footer. To make them feel like distinct “cards” similar to the desktop sidebar, we added the shadow-sm utility class.

<!-- Example: Owner Info Card -->
<div class="rounded-3xl bg-[var(--card-color)] shadow-sm transition-all lg:hidden">
  <!-- Content -->
</div>

Note: This shadow-sm class was applied to all mobile widget containers in the footer.

6. Navigation Menu Enhancements

File: src/components/NavBar.astro

We improved the tactile feel of the mobile menu by adding a background hover effect to the specific menu items.

<!-- Mobile Menu Item -->
<a 
  href={nav.href} 
  class="mobile-nav-item hover:bg-[var(--primary-color-hover)] rounded-lg py-2 px-3"
>
  <!-- Link Content -->
</a>

7. Mobile Search Bar Styling

File: src/components/MobileSearchBar.svelte

Finally, to make the search bar pop out from the background, we added a larger shadow to both the input field and the results panel.

<!-- Search Input Panel -->
<div
  class="... shadow-lg ... lg:hidden bg-[var(--card-color)] rounded-xl ..."
>
  <!-- ... -->
</div>

<!-- Result Panel -->
<div
  class="... shadow-lg ... bg-[var(--card-color)] rounded-2xl ..."
>
  <!-- ... -->
</div>

Conclusion

Mobile optimization is an iterative process of refining proportions, spacing, and visual cues. By bringing these desktop-quality details to the mobile view, we ensure that every visitor gets the same premium experience, regardless of whether they are on a phone, tablet, or desktop.