我正在网站上工作,但我只是想知道什么导致它在手机上显示得很糟糕。当它真的不应该有侧滚动。我想知道它的页脚是否会导致它。这是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;}
指向网站的链接,如果可以,请在手机上查看www.new.omegadesignla.com
谢谢。答案 0 :(得分:1)
您的中心图像.headtext
导致问题。您需要调整它,可能使用断点,具体取决于您尝试定位的设备。
如果您将其更改为display: block
并将其缩小,则可以看到我在说什么。
// Example Media Query
@media (max-width: 767px) {
.headtext {
// mobile-friendly styles here
}
}