I’m having some trouble getting my headers to work right with the responsive themes and I’m hoping someone can offer some advice. I have 2 separate issues.
On one site I am just trying to add an image logo that is roughly the same size as the default Title Text but I cannot seem to figure out how to make it behave for smaller screen width’s. On a smaller screen default Title Text is centered but when I replace it with an image header it’s always left justified. Executive Theme – dev1.spxtech.com
On another site I have a full width header image what looks great at full size but on smaller screens it shrinks the image just fine but adds blank space above and below the image like a widescreen movie. I’m sure this has to do with the minimum width for the header but I’m not sure how to code that so that the image fits perfect for smaller screens. Outreach Theme ottovector.spxtech.com
If any one could point me in the right direction I would appreciate it. I’m sure there is an easy solution and I’ve just been staring at it too long to see it. Thanks in advance!
The best approach for complete control is to apply a different #header background for each of the responsive sections. Otherwise you can add “background-size: contain;” to the #header rule but that never looks as good as setting custom images for each resolution.
Thanks SoZo, that was kind of what I was thinking for issue number 2. Any thoughts on issue one? In that case the image size isn’t really an issue since I went with a size that is only as wide as the smallest screen size I am designing for. The problem is that for the in between sizes it stays left justified instead of centering like the Default Title Text would.
AHHH, yes that does work but in messing around with that I found I can still use the same image I just needed to adjust the alignment of the image for screen sizes under a certain width. The logo image I used was only 320×100 anyhow. Thanks for the help!
The topic ‘Responsive Logo Image in the Header’ is closed to new replies.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.