Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header image padding
- This topic has 2 replies, 2 voices, and was last updated 10 years, 1 month ago by CSG.
-
AuthorPosts
-
March 14, 2014 at 10:33 am #94871CSGMember
Hey All,
I'm just getting started so please pardon my ignorance.
I'd like to reduce the whitespace (padding, I believe) around my header on this website:
http://www.appliedbiomechanics.ca
(Password is 'buster')
But I've tried reducing all margins and padding in the header section of my style.css to zero, with no effect.
I'd also like to add a space between the header image and the main nav menu, so the Vitruvian man shows through. Is that possible too?
Thanks in advance!
Conor
http://www.appliedbiomechanics.caMarch 16, 2014 at 10:23 am #95160Sridhar KatakamParticipantTo answer the first part of your question, add this in style.css:
.site-container { padding-top: 10px; } .site-title { margin-bottom: 5px; }
March 17, 2014 at 4:16 pm #95383CSGMemberThanks for the answer Sridhar.
Unfortunately that doesn't resolve the problem.
Here is the relevant code from my style.css
###
/* Site Containers
--------------------------------------------- */.site-container {
background-color: #fff;
margin: 32px auto;
margin: 3.2rem auto;
max-width: 1140px;
overflow: hidden;
padding: 10px;
padding: 1.0rem;
}.site-inner {
clear: both;
padding-top: 10px;
padding-top: 1.0rem;
}.wrap {
margin: 0 auto;
max-width: 1140px;
}/*
Site Header
---------------------------------------------------------------------------------------------------- */.site-header {
background-color: #fff;
padding: 0;
overflow: hidden;
}.header-image .site-header {
padding: 0;
}/* Title Area
--------------------------------------------- */.title-area {
float: left;
padding: 0;
width: 1140px;
}.site-title {
font-family: 'Oswald', sans-serif;
font-size: 48px;
font-size: 4.8rem;
line-height: 1;
margin: 0 0 16px;
margin: 0 0 1.6rem;
text-transform: uppercase;
}.site-title a,
.site-title a:hover {
background-color: #f96e5b;
color: #fff;
display: inline-block;
padding: 16px;
padding: 1.6rem;
text-decoration: none;
}.site-description {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}/* 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-title,
.header-image .title-area {
min-height: 100px;
padding: 0;
}.header-image .site-title a {
background-color: none;
max-width: 1140px;
min-height: 100px;
padding: 0;
}/* Widget Area
--------------------------------------------- */.site-header .widget-area {
float: right;
width: 0px;
}.site-header .search-form {
float: right;
margin-top: 16px;
margin-top: 1.6rem;
width: 50%;
}Any ideas?
Thanks,
Conor -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.