网站Header标题与Logo对齐及响应式字体问题求助

Hey there! Let's work through your two header problems step by step:

1. Aligning the Logo & Site Title Vertically #

The issue with your current float + padding-top approach is that it's a "hacky" way to position elements—float wasn't designed for precise vertical alignment, and differing element heights or paddings can throw things off easily.

Solution: Switch to Flexbox #

Flexbox makes horizontal/vertical alignment straightforward and reliable. Update your header container (replace .site-header with your actual header wrapper class if needed) and element styles like this:

/* Style your header wrapper to use flex layout */
.site-header {
  display: flex;
  justify-content: space-between; /* Pushes title to left, logo to right */
  align-items: center; /* Vertically centers both elements perfectly */
  padding: 20px 0; /* Adjust vertical padding to control overall header height */
}

/* Clean up the site title styles */
p.site-title {
  font-size: 80px;
  margin: 0; /* Remove default paragraph margin to avoid extra unwanted spacing */
}

/* Logo styles */
.custom-logo {
  max-height: 200px;
  margin: 0; /* Remove any default margin on the logo element */
}

This eliminates the need for arbitrary padding-top values and ensures consistent vertical alignment no matter the screen size.

2. Fixing Unresponsive @media Font Sizing #

There are a few common culprits when media queries fail to work:

First, Verify the Viewport Meta Tag #

Without this tag in your HTML <head>, mobile browsers won't respect your responsive styles at all:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Second, Ensure Proper Selector Weight & Order #

Media queries need to come after your base styles, and the selector inside should have equal or greater weight than your original rule. Try this structure:

/* Base desktop style (keep this first) */
p.site-title {
  font-size: 80px;
}

/* Mobile/tablet media query (place AFTER base styles) */
@media (max-width: 768px) {
  /* Use the same selector (or a more specific one) to override the base style */
  p.site-title {
    font-size: 40px; /* Adjust to your preferred mobile/tablet size */
  }
}

If it still doesn't take effect, boost the selector specificity (e.g., .site-header p.site-title) to guarantee it overrides the base style.

Double-Check Your Breakpoint #

Make sure the max-width value matches the screen size you're testing. For example, if targeting larger tablets, you might want max-width: 1024px instead of 768px.

内容的提问来源于stack exchange，提问作者Sugar Shimmy