【问题标题】:How can i remove large white areas of mobile site? [closed]如何删除移动网站的大面积白色区域? [关闭]
【发布时间】:2013-08-13 04:36:05
【问题描述】:

我想为我的移动网站的所有页面消除两条阴影线之间浪费的大量空白。

我在我的桌面版本上使用#pageWrapper { margin-top: 30px; } 作为间距,但也许这不是理想的方式?我被要求删除它,但它弄乱了桌面视图的间距。

我的网站是http://jeffreydowellphotography.com(如果它不赞成发布我的网站链接,我很抱歉,但我不知道如何向您展示)我是菜鸟。

【问题讨论】:

    标签: css wrapper margin space


    【解决方案1】:

    您需要在媒体查询中应用移动样式:

    @media screen and (max-width: 800px) {
        #pageWrapper {
            margin: 0;
            padding: 0 20px;
        }
        .sqs-layout .sqs-row .sqs-block:last-child {
            padding-bottom: 0;
        }
    }
    

    【讨论】:

    • 这对顶部有用。它如何影响底部间距?
    • 我已经更新了我的答案。但在未来,您只需要查看您的 DOM 并找出哪些选择器正在应用不需要的空白并相应地进行调整。只需确保将样式放在媒体查询中即可。
    • 现在它让我的两个社交图标几乎碰到了我的版权文本,但它修复了间距
    • 我修复了社交图标的问题,但上面的 css 似乎移动了顶部那条细蓝线上的阴影。是什么原因造成的?
    • 我不会将填充直接添加到链接中,因为这会以意想不到的方式增加可点击区域。而是直接将其添加到 .social-links 中。
    猜你喜欢
    • 1970-01-01
    • 2014-09-02
    • 1970-01-01
    • 2020-05-30
    • 1970-01-01
    • 1970-01-01
    • 2022-01-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多