是什么导致移动网站滚动 space

Question

我正在一个网站上工作，但我只是想知道是什么导致它在移动设备上显示得很奇怪 phone。当它真的不应该时，它有一个侧面滚动。我想知道它是否是造成它的页脚。这是 css:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
header {
    padding: 1em;
    background:#EFDECD; //#5ee;
    text-align: center;

}
p{
font-family: Verdana, Geneva, sans-serif;
}
.paragraph{
font-size: 1em;
//font-family:  Charcoal, sans-serif;
}
#content {
    padding: 1em;
     padding-bottom: 7em;   /* Height of the footer element */
}
footer {
    display: block;
    width:100%;
    height:5em;
    position:fixed;
    bottom:0;
    left:0;
    background:#EFDECD; //#EFDECD
    text-align: center;
    overflow: hidden;
    a{
        padding: .75rem;
       // position:relative;
        top: 1.5em;
        display: inline-block;
        font-size: .72rem;
    }
    p{
        font-size: .72rem;
    }
}

video{
    width: 100%;
    height:auto;
}

.label{
margin-left: .5em;
    margin-right: .5em;
}
table{
font-size: .75em;
}

.panel.callout a:not(.button):hover{
  color: $anchor-font-color-hover;
}

.headingtext{
font-family:  Century Gothic, sans-serif;

}
.headtext{
    display:inline-block;
 //   font-size:3em;
    margin: 0 10em;
    text-align: center;
 //   font-family:"Courier New";
  //  font-weight: bold;
 //   margin-left: 6em;

}
.img2{
   // max-height: 20%;
    max-width: 25%;
    float:right;
    display:inline-block;
   }

.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}

如果可以的话，link 可以在您的手机 phone 上查看该站点 www.new.omegadesignla.com

谢谢。

Answer 1

您的中心图片 .headtext 导致了问题。您需要对其进行调整，可能需要根据您尝试定位的设备设置断点。

如果你把它改成display: block并给它一个更小的尺寸，你就会明白我在说什么。

// Example Media Query 
@media (max-width: 767px) {

  .headtext {
    // mobile-friendly styles here
  }

}

是什么导致移动网站滚动 space

whats causing scroll space on mobile site

css

mobile