Shortening Header Image Size in Snaps Theme
-
Hello!
I’m a newbie here looking to customize the CSS for my site. I have ONE wish… that the header of my site (using snaps theme) was thinner. I’ve tried changing the photo shape, but it just zooms in to fill the space. I had a friend try to add CSS and nothing changed. Is there CSS I can add to diminish the dead space between the title and the logo? So that the header image doesn’t fill the entire browser? Take a look: http://www.samosasandsunshine.com
Any help would be greatly appreciated! Thank you for your time and expertise!The blog I need help with is: (visible only to logged in users)
-
Hi there!
Your header image is larger than the recommended size at this point, so let’s get that re-sized first and then we can talk about doing more with CSS if you’re not happy.
Snaps supports a custom header 1200 pixels wide by 500 pixels high. Your current header image is 1260px x 526px. Can you re-size your image to those dimensions and see if you like the look better?
If you don’t have it handy, here’s the link to your theme documentation that details that for you:
https://wordpress.com/themes/snaps/
Cheers!
-
Thanks so much for responding! I made the image size smaller and re-uploaded, and I adjusted the crop as suggested in the link you provided, but instead it just zoomed in on the picture to make it fill the screen. I left it as is so you can see what I attempted. Any thoughts on making the header area thinner without changing themes? Thanks so much! You’re a lifesaver!
-
Hi!
Good try!! Your image needs to be 1200pixels x 500pixels. You re-sized your image so it’s now 1200px x 328px. Because it needs to be 500 pixels in height and it’s only 328px, it’s having to stretch to fill that space. If you can crop and re-size your image so it’s 1200px by 500px then it will look okay.
Do you want the total height of the header image reduced? Just asking in case it’s the issue of the image stretching to fill the screen rather than the overall height.
Cheers!
-
Hi,
I adjusted the picture, I believe it’s 1200 x 500 now. But yes, I’m hoping to reduced the entire height of the header by 1/3 or 1/2. It fills the entire browser/screen and a few readers have complained that they have to scroll down each time. Thoughts?
Thanks!
-
Hello! Try using this code and changing the value to get the amount of space between the logo and the title that you want:
h1.site-title { margin-top: 10px; }The image will automatically resize to the area it is provided.
-
Oh my goodness! That is so helpful!
I also got rid of the logo and now the header feels much more manageable.
Do you happen to know a way to have more control over the title font size? The difference between “normal” and “small” under customize is HUGE. Perhaps just a little small can really get the header size in the sweet spot?
Your help is much appreciated! Thanks! -
Oh my goodness! That is so helpful!
I also got rid of the logo and now the header feels much more manageable.
Do you happen to know a way to have more control over the title font size? The difference between “normal” and “small” under customize is HUGE. Perhaps just a little small can really get the header size in the sweet spot?
Your help is much appreciated! Thanks!
- The topic ‘Shortening Header Image Size in Snaps Theme’ is closed to new replies.
WordPress.com Forums 