AMP页面移动端（<768px）Footer溢出截断问题求助

Let's break down why your footer is getting cut off on mobile screens (<768px) and fix it step by step:

Root Causes of the Overflow #

1. Fixed width on inner container: Your .innerFooter has a hardcoded width: 1100px which doesn't shrink on small screens, pushing content beyond the viewport.
2. Incorrect viewport width usage: .footer uses width: 100vw — this includes the width of vertical scrollbars (if present), creating horizontal overflow.
3. Unresponsive float layout: The float: left on .footerThird elements doesn't adapt to narrow screens, causing content to overlap or overflow.

Modified Code Solution #

Here's the updated CSS for your footer section, plus a small HTML fix:

Updated AMP Custom CSS (Footer Section)

.footer {
  /* Replace 100vw with 100% to avoid scrollbar-related overflow */
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 20px 0;
  box-sizing: border-box;
  background-color: #18181a;
}

.innerFooter {
  display: block;
  margin: 0 auto;
  /* Use max-width instead of fixed width to adapt to screen size */
  max-width: 1100px;
  width: 100%;
  height: 100%;
  /* Add padding to prevent content touching screen edges on mobile */
  padding: 0 15px;
}

.innerFooter .logoContainer {
  width: 35%;
  float: left;
  height: 100%;
  display: block;
}

.innerFooter .footerThird {
  padding-left: 20px;
  width: calc(21.66666667% - 20px);
  margin-right: 10px;
  float: left;
  height: 100%;
}

.innerFooter .footerThird:last-child {
  margin-right: 0;
}

.innerFooter .footerThird h1{
  font-family: 'Work Sans';
  font-size: 22px;
  color: white;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  /* Reduce font size on mobile to fit better */
  font-size: 16px;
}

.innerFooter span {
  font-family: 'Work Sans';
  font-size: 12px;
  color: white;
}

/* Add media query for mobile screens to rearrange footer layout */
@media screen and (max-width: 767px) {
  .innerFooter .logoContainer,
  .innerFooter .footerThird {
    width: 100%;
    float: none;
    padding-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .innerFooter .footerThird:last-child {
    margin-bottom: 0;
  }
}

Small HTML Fix (Amp-Img Closure)

Your footer logo's amp-img tag wasn't properly closed — fix it like this:

<div class="logoContainer">
  <amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200"></amp-img>
</div>

Key Changes Explained #

• width: 100% instead of 100vw: Ensures the footer only takes up the available content width, ignoring scrollbar width.
• max-width: 1100px on .innerFooter: Keeps the footer constrained on large screens but allows it to shrink to fit mobile viewports.
• Mobile media query: Stacks all footer sections vertically on screens <768px, eliminating horizontal overflow and making content easier to read.
• Font size reduction: Shrinks the address/phone text on mobile to prevent line breaks from causing unexpected overflow.
• Proper amp-img closure: Fixes a potential AMP validation issue that could cause layout quirks.

After applying these changes, your footer should fit perfectly on all mobile devices without getting cut off.

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