Hero区域响应式文本框问题求助：解决消失与居中适配需求

Great question! Let’s break down how to resolve both your problems—keeping the text box visible when resizing the window and centering it on tablet-sized screens (around 768px):

1. Stop the Text Box from Disappearing on Resize #

The disappearance is almost always caused by one of these common issues:

• The parent Hero container has overflow: hidden without setting a minimum width for the text box
• Accidental media queries hiding the text box at smaller screen widths
• Absolute positioning without proper left/right constraints pushing the box off-screen

Here’s a solid base CSS fix to address this:

.hero-container {
  position: relative; /* Required if using absolute positioning for the text box */
  width: 100%;
  overflow: visible; /* Avoid hidden unless you specifically need it */
  min-height: 400px; /* Adjust to match your Hero section's height */
}

.hero-text-box {
  position: relative; /* Safer for responsiveness than absolute, but adjust if needed */
  margin-left: 2rem; /* Your desired consistent left margin */
  max-width: 500px; /* Prevent the box from stretching too wide on large screens */
  min-width: 280px; /* Ensure it doesn’t shrink below a readable width */
  padding: 1.5rem;
  box-sizing: border-box; /* Include padding in width calculations to avoid overflow */
}

If you’re using absolute positioning for the text box (to align it vertically, for example), modify it like this:

.hero-text-box {
  position: absolute;
  left: 2rem; /* Maintain your left margin */
  top: 50%;
  transform: translateY(-50%); /* Vertically center the box */
  max-width: 500px;
  min-width: 280px;
  padding: 1.5rem;
  box-sizing: border-box;
}

Just make sure the parent .hero-container has position: relative so the absolute text box anchors correctly to it.

2. Center the Text Box on Tablet Screens #

Add a media query targeting screens up to 768px to adjust the alignment:

@media (max-width: 768px) {
  .hero-text-box {
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Optional: center the text inside the box too */
  }
}

If you’re using absolute positioning, update the media query to:

@media (max-width: 768px) {
  .hero-text-box {
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    margin-left: 0; /* Reset the left margin */
  }
}

Quick Additional Checks #

• Double-check for existing media queries that might be setting display: none or visibility: hidden on the text box by accident.
• Prevent text overflow inside the box with this line (handles long words):

.hero-text-box p {
  overflow-wrap: break-word;
}

If you can share a snippet of your current HTML/CSS, I can refine this solution even further to match your exact setup!

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