移动端与桌面端样式适配问题：作品集Logo右浮动适配咨询

Hey there! Let’s sort out that mobile layout issue with your project logo. I’ve dealt with similar float-related responsive headaches before, so here’s a straightforward fix that’ll work across desktop and mobile.

First, Fix the HTML Structure #

Your original code has a small issue: <a> tags don’t have a src attribute — that’s meant for <img> elements. Let’s clean that up and use a CSS class instead of inline styles (way easier to maintain for responsive design):

<p><a href="http://matzniewski.com/my-work/amazin-aces/" class="project-logo">
  <img src="img" alt="Amazin' Aces Pickleball Logo" width="200" height="200" />
</a></p>
<h4><strong>Amazin' Aces Pickleball</strong></h4>

Add CSS for Desktop & Mobile Adaptation #

Inline styles are hard to override for responsive cases, so let’s move the styling to a CSS stylesheet:

Base Desktop Styles

This keeps your desired right-float behavior on larger screens, plus adds some spacing to prevent text from sticking to the logo:

.project-logo {
  float: right;
  padding: 0;
  margin-left: 1rem; /* Adds breathing room between logo and text */
}

.project-logo img {
  max-width: 200px; /* Ensures logo doesn’t overflow its container */
  height: auto; /* Preserves image aspect ratio */
}

Mobile-First Adjustment (Media Query)

On small screens, floating elements often cause overlapping or messy layout. We’ll reset the float and center the logo for better readability:

@media (max-width: 768px) {
  .project-logo {
    float: none; /* Disable floating on mobile */
    display: block; /* Make the logo container take full width */
    margin: 0 auto 1rem; /* Center the logo and add bottom spacing */
  }

  .project-logo img {
    max-width: 150px; /* Shrink the logo slightly for mobile screens */
  }
}

Why This Works #

• Desktop: The logo floats right and wraps text as intended, with margin to avoid cramped spacing.
• Mobile: The logo stops floating, sits centered on its own line, and uses a smaller size to fit the limited screen space — no more overlapping or weird layout glitches.

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