Responsive Logo Image in the Header

Community Forums › Forums › Design Tips and Tricks › Responsive Logo Image in the Header

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  SoZo 4 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 30, 2013 at 9:41 am #16392

    Pharaoh Man
    Participant
    Post count: 6

    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!

    January 30, 2013 at 11:19 am #16410

    SoZo
    Moderator
    Post count: 1573

    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.

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 11:23 am #16416

    Pharaoh Man
    Participant
    Post count: 6

    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.

    January 30, 2013 at 11:24 am #16419

    SoZo
    Moderator
    Post count: 1573

    You need to use different images.

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 30, 2013 at 11:54 am #16423

    Pharaoh Man
    Participant
    Post count: 6

    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!

    January 30, 2013 at 1:00 pm #16444

    SoZo
    Moderator
    Post count: 1573

    You’re welcome :)

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Responsive Logo Image in the Header’ is closed to new replies.