WordPress 图文简介组件：大屏堆叠，小屏左右并排布局

Got it, let's work through this responsive author bio issue—this is a common tweak with WordPress themes, and I’ve helped a handful of users sort this out. Here’s a step-by-step solution that should get your layout behaving exactly how you want:

1. First, Nail Down the HTML Structure #

If you’re using a custom HTML widget (or modifying your theme’s sidebar template), make sure your author bio has a clean, semantic structure. This makes the CSS easier to target. For example:

<div class="author-bio-widget">
  <img src="your-avatar-url.jpg" alt="Your Name" class="author-avatar">
  <div class="author-details">
    <h4>Your Full Name</h4>
    <p>A quick, friendly bio about your work, interests, or what readers can expect from your content.</p>
    <a href="/your-author-profile" class="author-link">View My Full Profile</a>
  </div>
</div>

If your theme already includes an author bio widget, you can skip writing this from scratch—just use your browser’s dev tools (F12) to note the existing class names (replace the ones in my CSS below with your theme’s actual classes).

2. Add Custom CSS for Responsive Behavior #

Head to Appearance > Customize > Additional CSS in your WordPress dashboard (or edit your child theme’s style.css if you’re using one) and paste this code. I’ve included comments to explain what each part does:

/* Default sidebar style (desktop) - stacked layout */
.author-bio-widget {
  margin-bottom: 2rem;
  padding: 1.2rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

.author-avatar {
  width: 100%;
  height: auto;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.author-details h4 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
}

.author-link {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.5rem 1.2rem;
  background-color: #2c3e50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

/* Responsive breakpoint - adjust this to match your theme's mobile cutoff */
@media (max-width: 768px) {
  /* Switch to left-image, right-text layout when sidebar moves below content */
  .author-bio-widget {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
  }

  .author-avatar {
    width: 85px;
    height: 85px;
    margin-bottom: 0;
    flex-shrink: 0; /* Stop the avatar from getting squished */
  }

  .author-details {
    flex: 1; /* Let the text section take up remaining space */
  }

  .author-link {
    margin-top: 0.5rem;
    font-size: 0.9rem;
  }
}

3. Troubleshoot Theme Conflicts #

If the CSS doesn’t work right away, it’s probably because your theme’s default styles are overriding yours. Here’s how to fix that:

• Right-click the author bio in your browser and select Inspect to see which classes your theme uses for the sidebar/widget.
• Update the CSS selectors to be more specific. For example, if your sidebar has a class of .sidebar-primary and widgets use .widget, change .author-bio-widget to .sidebar-primary .widget .author-bio-widget—this boosts the selector’s priority so your styles win.

4. Test Across Devices #

Don’t forget to preview on mobile (or use your browser’s responsive dev tools) to tweak the breakpoint (the max-width: 768px value) to match when your theme moves the sidebar below the main content.

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