我目前正在设置我的博客,我很难按照我计划的方式格式化标题。
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;
}
任何有关正确方向的帮助或指导将不胜感激!谢谢!
你可以这样做:
.site-container{
padding: 0
}
.header-image .site-header{
background-size: 1100px 200px !important;
}
.site-inner{
padding: 36px;
}
也许一些!重要的是需要并检查责任行为..
您的标题(.site-header
)具有固定的背景大小:
background-size: 1000px 200px !important;
但是你的.site-container
div的最大宽度为1100px,使你的图像比其他图像小。相反,让它响应,如:
background-size: 100% auto !important;
/*Assuming you have a reason for "!important" */
.site-container
有一个36px的水平填充,导致标题周围的空白。如果你添加:
.site-container {
padding-left: 0;
padding-right: 0;
}
你的水平空格会消失,但你还需要添加:
header {
background-size: 1100px 200px !important
}
使顶部图像跨越全宽。
最后清理它我会添加:
.site-inner{
padding-left: 36px;
padding-right: 36px;
}
所以你的文字侧面有一些空间。