手机上的页脚宽度

时间:2015-04-03 15:00:08

标签: html css wordpress responsive-design

我正在使用主题在wordpress中构建一个网站。该网站应该是响应式的,但是当我用手机去那里时有一个问题。页脚太宽,剩下的内容被推到左边,只是一条细条纹。

以下是网站:WEBSITE URL

2 个答案:

答案 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;">&copy; 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答案可能是正确的,但是如果你想用像平板电脑这样的其他设备宽度获得更好的结果,请使用上面的脚本。