Community Forums › Forums › Archived Forums › Design Tips and Tricks › Padding around Header
- This topic has 16 replies, 2 voices, and was last updated 9 years, 11 months ago by alexisonsmith.
-
AuthorPosts
-
April 21, 2014 at 7:25 am #101633alexisonsmithMember
Hi,
I have just imported an image to my header and I am having issues positioning it and adding padding around it. Could someone help point me in the right direction
Thanks
Alex
http://www.easyawardtravel.comApril 21, 2014 at 8:20 am #101642alexisonsmithMembermy code is currently this:
.site-header {
}.site-header .wrap {
padding: 40px;
padding: 4rem;
}April 21, 2014 at 10:28 am #101672Lauren @ OnceCoupledMemberHey Alex,
I'm not seeing a custom header image or that you're using a Genesis theme?
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 21, 2014 at 10:37 am #101676alexisonsmithMemberHi the rest of the code is as below:
Site Header
---------------------------------------------------------------------------------------------------- */.site-header {
}
.site-header .wrap {
padding: 40px;
padding: 4rem;
}/* Title Area
--------------------------------------------- */.title-area {
float: left;
font-family: Lato, sans-serif;
font-weight: 700;
padding: 16px ;
padding: 1.6rem ;
width: 320px;
}.header-image .title-area {
padding: 10px;
padding: 1rem;
}.site-title {
font-size: 28px;
font-size: 2.8rem;
line-height: 1;
margin: 0 0 8px;
margin: 0 0 0.8rem;
text-transform: uppercase;
}.site-title a,
.site-title a:hover {
color: #333;
}.site-description {
color: #999;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
margin-bottom: 0;
}/* 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 .wrap {
padding: 0;
}.header-image .site-title a {
margin: auto;
min-height: 250px;
width: 100%;
}April 21, 2014 at 10:52 am #101678Lauren @ OnceCoupledMemberWithout being able to see it live on your site, I can't guess how you'd want the image to be positioned versus how it is showing up now.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 21, 2014 at 10:57 am #101679alexisonsmithMemberIf you go on my site http://www.easyawardbooking.com you will see the top image (header) is slightly to the left. I am trying to position it in the centre
Thanks again for your support
Alex
April 21, 2014 at 11:11 am #101682Lauren @ OnceCoupledMemberThanks for updating that Alex, I can see what you mean now.
You're adding padding to the wrong place, since your background image is in
.site-header .wrap
.To position your image, try this:
.site-header .wrap { background: url(http://www.easyawardbooking.com/wp-content/uploads/2014/04/banner1.jpg) no-repeat center center !important; }
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 21, 2014 at 11:19 am #101684alexisonsmithMemberI did this and it did not move 🙁
.site-header {
}
.site-header .wrap {
background: url(http://www.easyawardbooking.com/wp-content/uploads/2014/04/banner1.jpg) no-repeat center center !important;
}April 21, 2014 at 11:23 am #101685Lauren @ OnceCoupledMemberThat's because the block of code
.site-header .wrap
already exists, you only need to add the new "center" attributes to it. You copied in the entire block, which is being overridden.Take a look at your code and when implemented correct it will work! 🙂
- Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 21, 2014 at 11:33 am #101688alexisonsmithMemberSo like this:
.site-header {
}
.site-header .wrap {
padding: 40px;
padding: 4rem;
background: url(http://www.easyawardbooking.com/wp-content/uploads/2014/04/banner1.jpg) no-repeat center center !important;
}?
AlexApril 21, 2014 at 2:49 pm #101714alexisonsmithMemberI am still having problems with the above, if anyone can help!?
Thanks
Alex
April 21, 2014 at 6:07 pm #101753Lauren @ OnceCoupledMemberSorry Alex, I thought your background image was being declared in your style sheet. Instead, it is being declared on your index. Do you know where this line is coming from? I would delete this, and what you have above should work.
<style type="text/css">.site-header .wrap { background: url(http://www.easyawardbooking.com/wp-content/uploads/2014/04/banner1.jpg) no-repeat !important; }</style>
Could be in your theme settings head section.
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 21, 2014 at 6:29 pm #101763alexisonsmithMemberLauren,
This is coming directly from my style.css. This is what I have now having deleted the above:
Site Header
---------------------------------------------------------------------------------------------------- */.site-header {
}
.site-header .wrap {
padding: 40px;
padding: 4rem;
}I have nothing in my theme head section
Alex
April 21, 2014 at 6:31 pm #101764Lauren @ OnceCoupledMemberYou don't need to delete what you had Alex. Just remove the line I included above that is being inserted into your index file somehow. I'm not sure where that line is, but it's your problem. 🙂
Cheers,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 21, 2014 at 6:48 pm #101769alexisonsmithMemberGot it! It was in Media Enquires! Thanks so much for your help!
May 12, 2014 at 5:02 pm #104759alexisonsmithMemberHi,
I was looking at my site on an Internet Explorer and the header image does not seem in the centre of the page it seems to be slightly to the right. However on Safari my website is all lined up. Can someone help me fix this?
Thanks again
Alex
May 14, 2014 at 6:32 pm #105190alexisonsmithMemberCould someone help me with the above!
Thanks so much
Alex
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.