Community Forums › Forums › Archived Forums › Design Tips and Tricks › Distorted header image – need help!
Tagged: foodie pro, header
- This topic has 4 replies, 2 voices, and was last updated 6 years, 10 months ago by deadliftsfordinner.
-
AuthorPosts
-
June 4, 2017 at 7:42 pm #207340deadliftsfordinnerMember
I know this is a frequently asked question (and I've read everything I could on this before posting) - but I'm still stumped.
My header image ends up either distorted (too wide), GIANT, off to the left, or with so much space around it you have to scroll down to get to my site content. Clearly I've messed something up and I don't know how to go back to the beginning without making it worse, so I'm looking for help now. Different sites I look at for coding help give me different codes to paste in, so now I feel like my CSS is an amalgamation of different snippets.
Site: deadliftsfordinner.com, currently using Foodie Pro theme. I've deleted my header image temporarily so my readers don't wonder what the heck is up with my site while I fix this.
My image I want to display at 390 width, 326 height.
--
Current functions.php section about header:
//* Unregister header right sidebar.
unregister_sidebar( 'header-right' );add_theme_support( 'custom-header', array(
'width' => 780,
'height' => 652,
'header-selector' => '.site-title a',
'header-text' => false,
) );--
Current style.css chunk about header (pasting in as much as I think I've messed up):
/*
Site Header
---------------------------------------------------------------------------------------------------- */.foodie-pro .site-header {
background-position: center;
padding: 20px 0;
}/* Title Area
--------------------------------------------- */.title-area {
padding: 16px 0;
width: 390px;
}.title-area h1 {
margin: 0 auto;
}.title-area p {
margin: 0;
}.header-image .title-area {
margin: 0 auto;
max-width: 390px;
padding: 0;
}.site-title,
.site-title a {
font-size: 55px;
font-weight: 300;
letter-spacing: 4px;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}.site-title a,
.site-title a:hover {
color: #444;
}.site-description {
color: #999;
font-family: 'Droid Serif', georgia, serif;
font-size: 11px;
font-style: italic;
font-weight: 400;
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: 390px 326px !important;
}.header-image .site-title > a {
-webkit-background-size: contain !important;
background-size: contain !important;
display: block;
height: 1326px;
margin: 10px auto;
max-width: 390px;
text-indent: -9999px;
}/* Widget Area
--------------------------------------------- */.site-header .widget-area {
float: right;
text-align: right;
width: 195px;
}.header-image .site-header .widget-area {
padding: 20px 0;
}.site-header .search-form {
float: right;
margin-top: 22px;
}--
Thank you in advance.
http://deadliftsfordinner.comJune 5, 2017 at 7:12 am #207352Victor FontModeratorYou'll need to add the image back so we can see what's wrong and help. Why are you setting the crop dimension to double the image size in this code?
add_theme_support( 'custom-header', array( 'width' => 780, 'height' => 652, 'header-selector' => '.site-title a', 'header-text' => false, ) );
Make the dimensions the size of the image.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?June 5, 2017 at 3:33 pm #207366deadliftsfordinnerMemberHey Victor!
The reason it's double the size is for the retina display - I was advised to make my image twice the size I wanted it to display.
I've added my image back for you. It's the size I want, but there is a TON of space below it before you get to my content and I don't understand why.
June 6, 2017 at 5:39 am #207383Victor FontModeratorYou have the height set to 1326px; in .header-image .site-title > a at line 1674 in style.css.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?June 6, 2017 at 7:30 am #207387deadliftsfordinnerMemberOh my gosh - thank you. This was what I was missing - I appreciate all your help!!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.