自定义WordPress Bootstrap主题移动端布局重叠问题求助

Hey there! Let's fix that mobile layout overlap issue with your WordPress Bootstrap theme. The core problem here is the absolute positioning of your #headertxt element, which breaks the natural document flow on small screens and causes it to overlap with the header title. Here's how to resolve it, plus some extra optimizations:

Quick Fix: Adjust Positioning for Mobile Screens #

Add this media query to your CSS to override the absolute positioning on devices smaller than 768px (Bootstrap's mobile breakpoint):

/* Mobile-specific styles for #headertxt */
@media screen and (max-width: 767px) {
  #headertxt {
    position: static; /* Reset to default flow, so it sits below the title */
    right: auto;
    bottom: auto;
    margin-top: 1.5rem; /* Add spacing from the header text */
    text-align: left; /* Switch to left alignment for better mobile readability */
    padding: 1rem; /* Refine padding for smaller screens */
  }

  #headertxt a {
    text-align: left;
    font-size: 1rem; /* Shrink font size to prevent overflow */
  }

  /* Optional: Shrink header title size on mobile */
  #page-sub-header h1 {
    font-size: 2rem;
  }

  #page-sub-header p {
    font-size: 1rem;
  }
}

This will instantly move #headertxt below your title and tagline on phones and small tablets.

Better Long-Term Fix: Use Bootstrap Grid System #

For a more maintainable solution that aligns with Bootstrap's responsive design principles, restructure your HTML to use Bootstrap's grid columns. This way, the layout will automatically stack on mobile without relying on absolute positioning:

Updated HTML:

<div class="container">
  <div class="wrapper row"> <!-- Add Bootstrap row class -->
    <!-- Header text section: takes 8 columns on medium+ screens -->
    <div class="col-md-8">
      <h1>
        <?php if(get_theme_mod( 'header_banner_title_setting' )){ echo get_theme_mod( 'header_banner_title_setting' ); }else{ echo 'Wordpress + Bootstrap'; } ?>
      </h1>
      <p>
        <?php if(get_theme_mod( 'header_banner_tagline_setting' )){ echo get_theme_mod( 'header_banner_tagline_setting' ); }else{ echo esc_html__('To customize the contents of this header banner and other elements of your site, go to Dashboard > Appearance > Customize','wp-bootstrap-starter'); } ?>
      </p>
    </div>
    <!-- Info box section: takes 4 columns on medium+ screens -->
    <div class="col-md-4">
      <div id="headertxt">
        <a>Zvani - <span class="head"> (+371) 29429748</span><br /></a>
        <a href="mailto:godeli@tvnet.lv">Raksti - <span class="head_2">godeli@tvnet.lv</span><br /></a>
        <a href="/ka-mus-atrast/">Redzi mūs <span class="head_2">kartē</span><br /></a>
        <a><span class="head">57°11'58.4"N 22°12'11.2"E</span><br /></a>
        <hr>
        <a href="./rekviziti/"><span class="head_2">REKVIZĪTI</span></a>
      </div>
    </div>
  </div>
  <a href="#content" class="page-scroller"><i class="fa fa-fw fa-angle-down"></i></a>
</div>

Updated CSS:

Remove the original absolute positioning styles for #headertxt, then add these rules:

#headertxt {
  background: rgba(0, 0, 0, 0.7);
  padding: 1rem;
}

/* Adjust spacing for larger screens */
@media screen and (min-width: 768px) {
  #headertxt {
    margin-top: 2rem; /* Push info box down to align with header text */
  }
}

This approach is more robust because it leverages Bootstrap's built-in responsive behavior, reducing the need for custom positioning hacks.

Extra Optimization Tips #

• Improve Mobile Touch Targets: Add padding to links in #headertxt to make them easier to tap on mobile:

  #headertxt a {
    display: block;
    padding: 0.25rem 0;
  }
  

• Fix Fixed Header Overlap: Your fixed header might cover the top of your content. Add padding to the body to compensate:

  body {
    padding-top: 70px; /* Match the height of your fixed header */
  }
  

• Test Across Devices: Use browser dev tools (Chrome DevTools' Device Toolbar) to preview how your layout looks on different screen sizes and tweak styles as needed.

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