移动网站上的 CSS 问题

Question

我在 http://wpmend.com 上有一个网站.该网站在桌面上看起来不错，但在移动设备上看起来不错，我认为我的自定义 CSS 搞砸了。您会看到主页部分的文本和按钮看起来不正确，并且在请求工作部分中，前两种工作类型的按钮根本没有显示。

我搜索了这个网站并发现了类似的问题和修复，但没有一个能解决我的确切问题。请告知我如何修复移动网站上的外观。顺便说一下，这是一个使用 Rapid 主题的 Wordpress 网站。

提前致谢!

斯科特。

Answer 1

也许您擅长使用 CSS3 的媒体查询。

将此代码添加到页面的 CSS，其中 #container 是在顶部包裹按钮的对象。

@media screen and (max-device-width:480px){
    #container: margin-top:15px;
}

这将在设备宽度小于 480px 时执行此 CSS 代码。它会将您的容器向下移动到标题下方。

注意:并非所有移动设备都小于 480px，您必须为特定设备实现多个媒体查询。引用:https://css-tricks.com/snippets/css/media-queries-for-standard-devices/