StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive Logo Image in the Header

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

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

This topic is: not resolved
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 30, 2013 at 9:41 am #16392
    Pharaoh Man
    Member

    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
    Member

    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
    Member

    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
    Member

    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
    Member

    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 320x100 anyhow.  Thanks for the help!

    January 30, 2013 at 1:00 pm #16444
    SoZo
    Member

    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.