Question

下面的链接是在哪里可以找到我为大学项目和客户创建的网站。

https://homepages.shu.ac.uk/~b7009049/wordpress/

网页加载完成后，系统会为您介绍一个页面标题，其中包含一个图像和两个按钮。一个会带您进入“关于我们”，另一个会带您进入服务。单击服务按钮，这就是问题所在。

基本上有白色缝隙，我希望下面的图像完全填满页面。就像全屏一样，只是您没有按F11键。

我不知道问题出在哪里。如果删除标题页，则它不会做任何清除间隙的操作。所以我认为标题不是问题。

我正在使用融合滑块+一个名为layerslider的插件。如果有帮助。

如果需要，我可以提供我正在编辑的屏幕截图。

非常感谢您。

Answer 1

在https://homepages.shu.ac.uk/~b7009049/wordpress/services/的顶部有两处产生空白的东西

一种是将填充应用于“ main”元素。您可以使用CSS消除它：

/* REMOVE MAIN TOP PADDING ONLY ON THIS PAGE (id-2546) (AT LEAST FOR NOW) */
.page-id-2546 #main {
    padding-top: 0;
}

您可能还希望摆脱此页面#main元素底部的填充-当然是padding-bottom: 0

这仍然会在顶部保留一个20px的白色条，这是由一个杂散的'p'元素产生的，该元素的底边距为20px。尽管此段恰好包含一个jQuery脚本（可能不应该在其中），但页面下方还有一个杂散的p元素-也包含在“ ls-”元素中-在两个全角图像之间也会产生20px的白色分隔元素，恰好是空的。

我不知道这些p的确切来源。您可能必须深入研究所涉及的应用程序（Layer Slider和我认为是Fusion Page Builder）以及如何在此处部署它们，以消除不必要的分离。

如果实际上无法清除它们，则可能必须再次通过CSS进行更正。只是为了摆脱此页面上显示的影响，您可以尝试

/* REMOVE MARGIN ON POST PARAGRAPHS ON THIS PAGE */
.page-id-2546 .post-content p {
    margin: 0;
}

如果您担心会影响Layer Slider之外的其他“ .post-content” ps，也可以尝试以下方法。

/* TARGET LAYER SLIDER .post-content p TO REMOVE WHITE SPACE */
.page-id-2546 .post-content .ls-fullscreen-wrapper p {
    margin: 0;
}

另一种方法是将负边距应用于.ls-fullscreen-wrapper：

/* TARGET LAYER SLIDER WRAPPER TO REMOVE WHITE SPACE*/
.page-id-2546 .ls-fullscreen-wrapper {
    margin-top: -20px;
 }

在没有实际进行安装或没有进行更彻底的检查的情况下，我不能确定所提供的代码是否足够，也不会产生不良后果，但这可能只是一个开始。您可以将代码片段添加到“ Customizer Additional CSS”框中，然后查看结果。

注释后的附加注释

我已经回到页面，看来您已经成功添加了消除20px后内容p边距的代码，但是对于90px顶部（和底部）填充，我看不到有任何适用或否决的内容在#main上。

我不知道您要如何解决这个问题。我以前建议使用Wordpress定制程序（假设您使用的是Wordpess 4.7或更高版本）-请参见https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/。

从检查中我可以看到，有问题的填充是通过主题/融合样式表添加的。在加载其他样式表之后，定制程序会将您的新CSS添加到基础html中，因此应覆盖重复的选择器。如果仍然无法使用，您可以尝试将!important添加到新样式中。我认为大多数编码人员都会将此方法视为一种错误，但是所有这些事后纠正工作都是错误的。

/* LAST RESORT KLUDGE TO REMOVE 90px TOP PADDING ON #MAIN ON IDENTIFIED PAGE  */ 
.page-id-2546 #main {
   padding-top: 0 !important;
}

如果那行不通-例如，如果检查该元素根本没有显示所应用的代码-那么我将考虑缓存问题和特殊的主题特征，更不用说错别字了... < / p>

消除Wordpress页面的空白

1 个答案: