Question

我们是一个建立wordpress网站的小型艺术画廊 - 您可以在此处查看正在进行的工作：http://kiraaskaroff.com/BB_Test2/

页脚在计算机上看起来很棒但是它的固定布局在移动设备上看起来很垃圾（部分消失等）

* footer */

#footer-content { margin-top: 60px; max-width:978px; min-width:320px;  height:230px;     overflow:hidden; padding-top:0px;  padding-left:200px; font-family:Georgia; color:#3F3F3F;  font-size:12px; text-align:left; }

#footer-left { float:left; width:199px;  height:182px; overflow:hidden;  }
#footer-mid1 { float:left; width:230px; height:182px; overflow:hidden; }
#footer-mid2 { float:left; width:138px;  height:182px; overflow:hidden; }
#footer-right { float:left; width:180px;  height:182px; overflow:hidden; }

.footer-header { font-family:Georgia, font-size:14px ; font-weight: bold; display:block;     color:#3F3F3F; padding-bottom:16px;text-align:left; }

.footer-social-a { display:inline; padding-right:5px; padding-top:18px;text-align:left; }

.styles #page .site-info a {
font-size: 12px;}

任何帮助它在手机上看起来更好的帮助都会很棒！

Answer 1

您需要对媒体查询进行一些研究，这样您就可以在不同的屏幕尺寸上应用不同的CSS。因为即使你在移动大小的屏幕上看起来正确，它在手机和桌面之间的大小上看起来仍然会有所不同（尝试在桌面上调整浏览器大小以查看我的意思）。

例如，您的桌面页脚有列 - 可能有一些屏幕尺寸需要两行两列，而在移动设备上您可能需要一列四行。

为了帮助您入门，在样式表底部添加此内容可以帮助您解决特定问题（一列有四行）：

@media only screen and (max-width: 620px) {
    #footer-content {
        height: auto; /* Remove the fixed height - that's the reason not all the footer is visible */
        padding-left: 2%; /* On desktop you have a lot of space on the left - it's not needed on mobile */
    }

    #footer-left,
    #footer-mid1,
    #footer-mid2,
    #footer-right {
        width: 100%; /* Make each column takes the full width available */
        height: auto; /* If you leave the fixed heights from the desktop version you'll have strange gaps */
        padding-bottom: 10px; /* Make sure you have a minimum gap between the rows */
    }
}

我还没有完全测试过，但它应该作为一个起点。

Wordpress固定页脚可以更改为响应式页脚吗？

1 个答案: