我目前正在设置我的博客,而且我很难按照我计划的方式格式化标题。
Here is my site。如您所见,它们是标题两侧的额外空间。我的目标是移除空间,使花卉图案与内容框或您称之为的内容齐平。
我已多次浏览我的主题CSS,并更改了所有内容以及可能与标题图像相关的任何内容的边距,宽度和填充,但运气不佳。他们的东西是我失踪的吗?
我的博客是通过Wordpress托管的,我的父主题来自Genesis Framework。
以下是标题图片的CSS:
/*
Site Header
--------------------------------------------- */
.audrie .site-header {
background-position: center;
padding:0px 0;
width:100%;
}
/* Title Area
--------------------------------------------- */
.title-area {
padding: 0px 0;
margin-bottom: 30px;
margin-top: 20px;
}
.title-area h1 {
margin: 0 auto;
}
.title-area p {
margin: 0;
}
.header-image .title-area {
padding: 0;
width:100%;
}
.site-title,
.site-title a {
font-size: 64px;
font-weight: 600;
letter-spacing: 8px;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow-wrap: break-word;
}
.site-title a,
.site-title a:hover {
color: #747474;
}
.site-description {
color: #808080;
font-family: Lato;
font-size: 13px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-align: center;
text-transform: none;
}
/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
}
.header-image .site-description,
.header-image .site-title a {
display: block;
text-indent: -9999px;
}
/* Logo, hide text */
.header-image .site-header {
background-position: center !important;
background-size: 1000px 200px !important;
padding: 0;
margin-top:-90px;
padding-bottom:30px;
}
.header-image .site-title a {
float: none;
min-height: 200px;
width: 100%;
}
/* Widget Area
--------------------------------------------- */
.site-header .widget-area {
float: right;
text-align: right;
width: 720px;
}
.header-image .site-header .widget-area {
padding: 0px 0;
}
.site-header .search-form {
float: right;
margin-top: 22px;
}
非常感谢任何正确方向的帮助或指导!谢谢!
答案 0 :(得分:1)
您的标题(.site-header
)的背景大小固定为:
background-size: 1000px 200px !important;
但是你的.site-container
div的最大宽度为1100px,使你的图像比其他图像小。相反,让它响应,如:
background-size: 100% auto !important;
/*Assuming you have a reason for "!important" */
答案 1 :(得分:1)
$result = file_get_contents(
$url,
false,
stream_context_create(
array(
'http' => array(
'ignore_errors' => true
)
)
)
);
有一个36px的水平填充,导致标题周围的空白。如果你添加:
use Env::Modify qw(:ksh source);
source("./test1.sh"); # env settings from test1.sh now available in Perl
print `$ENV{DATE}`; # print `/bin/date`;
你的水平空格会消失,但你还需要添加:
.site-container
使顶部图像跨越全宽。
最后要清理它我会添加:
.site-container {
padding-left: 0;
padding-right: 0;
}
所以你的文字两侧有一些空间。
答案 2 :(得分:0)
.site-container{
padding: 0
}
.header-image .site-header{
background-size: 1100px 200px !important;
}
.site-inner{
padding: 36px;
}
也许一些!重要的是需要并检查责任行为..