我正在使用主题在wordpress中构建一个网站。该网站应该是响应式的,但是当我用手机去那里时有一个问题。页脚太宽,剩下的内容被推到左边,只是一条细条纹。
以下是网站:WEBSITE URL
答案 0 :(得分:1)
您的页脚标记中有一个div,其内嵌样式的宽度为960px。使用类site-info
查看div内部的div。
当前div HTML:
<div class="site-info">
<div style="width:960px; margin:0 auto;">
<p style="float:left;">© Copyright 2015 Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png"></a>
<a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png"></a>
</div>
<div class="clear"></div>
</div>
</div>
将其更改为:
<div class="site-info">
<div style="margin:0 auto;">
<p style="float:left;">© Copyright 2015 Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png"></a>
<a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png"></a>
</div>
<div class="clear"></div>
</div>
</div>
答案 1 :(得分:0)
你的问题出在那些行
<div class="site-info">
<div style="max-width: 960px; margin: 0px auto; width: 100%;">
<p style="float:left;">© Copyright 2015 Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a href="" style="display: block; float:right; margin:-4px 0 0 5px;"><img src="/wp-content/themes/adamos/images/gplus.png"></a>
<a href="" style="display: block; float:right; margin:-4px 5px 0 5px;"><img src="/wp-content/themes/adamos/images/facebook.png"></a>
</div>
<div class="clear"></div>
</div>
如果你把这个css脚本放在页面或任何css文件中,你的问题应该解决。
<style>
@media(min-width:960px) {
.site-info div {
margin: 0 auto !important;
max-width: 960px !important;
width: 100% !important;
}
.site-info div div{width:auto !important;}
}
@media(max-width:960px) {
.site-info div {
margin: 0 2% !important;
max-width: 960px !important;
width: 96% !important;
}
.site-info div div{width:auto !important;}
}
@media(max-width:630px) {
.site-info div {
margin: 0 2% !important;
max-width: 960px !important;
text-align: center !important;
width: 96% !important;
}
.site-info div div, .site-info p {
clear: left !important;
float: none !important;
}
}
</style>
@ hopkins-matt答案可能是正确的,但是如果你想用像平板电脑这样的其他设备宽度获得更好的结果,请使用上面的脚本。