Custom header in responsive theme (Celsius) is not responding to change in monitor sizes
-
I am using the Celsius theme. I created a custom header for my blog. The theme recommends for the header to be 2000x500px, so that is the size I made it using Canva. It looks good on my iMac screen, but on my husband’s and granddaughter’s smaller monitors, it doesn’t fit. It runs over the edge of the screen. Also it doesn’t resize for my iPad, so it is too large. I need to know what to do so that it will fit on all screens and will be responsive.
The blog I need help with is: (visible only to logged in users)
-
Hi there! Header images are not intended to display the title of your site. They’re a background that will be resized for the various screens they’re displayed on. I’d suggest uploading the image of the river & forest as your Header image, and then setting your title and tagline to display on your site.
If you’d like, I can help you find a different theme that displays the site title more prominently. Here are a few I’d suggest:
-
Of course, I could do what you suggest about uploading the image of the river and forest as my header, but when I took the WordPress Blogging 101 and 201 classes, I learned about creating the custom header with my title and tagline on my image. Here is their explanation about custom headers. I actually did that with my previous theme (Edda) and it worked fine. So I am puzzled by your response. Can you shed any more light on it? (I hope that link works. It is to a WordPress page.)
-
Thanks for the link! And you’re totally right that headers with words can work really well. I apologize for the confusing response.
Since your theme’s header is full width, it’s less amenable to this type of header. I’ve taken a closer look at what we can do to make this work though. The CSS is a bit complicated because it needs to affect the different breakpoints, but here you go:
@media screen and (min-width: 60em) { .site-header-image { height: 375px; } } .site-header-image div { background-size: contain; }You can copy this entire code block and paste it into the CSS section in your Customizer.
-
Thank you for getting back to me, Shawna. I have checked it out on my iPad, and it definitely looks better than it did, but there is still a problem. The name J.R.R. Tolkien and the very bottom of the header show at the top above the title Seen Along the Trail. Then at the bottom (under J.R.R. Tolkien and right above the green background of the home page), the top of the header is visible, i.e. the trees with the very top of the title letters. If you tell me how to take a screen shot on my iPad, I could send it to you. Thank you for sticking with me on this. When my husband gets home, I will check on his monitor to see what it looks like.
-
Hello. I’m back. I checked it on both of my husband’s monitors, using chrome and IE. The result if the same. About one inch (or a little less) of the top of the header is appearing at the bottom of the header. The part in between, i.e. the middle ¾ of the header, is looking good.
-
I also just looked again at the header on my iMac scree. It’s good from top to bottom, but on the left side and right side of the header there is a repeat. It’s strange because on the left side, about two inches are a repeat of the right side of the header. On the right side, it’s the reverse, with about two inches of the left side of the header being repeated. In other words, the actual header (as I designed it) only takes up part of the horizontal real estate on the screen. On the right and left side of the header, it fills in by borrowing part of the header and appending it to the actual header. I’m not sure that makes sense, but it’s the best description I can give you.
-
Shawna:
Here is a link to the screenshot of my header:
https://skip22037.files.wordpress.com/2015/10/screen-shot-2015-10-06-at-7-08-22-pm1.pngMaybe that will clarify what I am trying to say.
-
This should solve the repeat issue. It won’t repeat from top/down as well:
.site-header-image div { background-repeat: no-repeat; } -
Thank you for responding. One question: Should I add this code to the CSS that I added yesterday.
-
You can add it at the end or in the code that Shawna gave, replace this specific bit:
.site-header-image div { background-size: contain; }With this:
.site-header-image div { background-size: contain; background-repeat: no-repeat; } -
- The topic ‘Custom header in responsive theme (Celsius) is not responding to change in monitor sizes’ is closed to new replies.
WordPress.com Forums 
