WordPress.org

Forums

Quark
[resolved] Making the site-title image (logo) responsive (media queries or scripting?) (3 posts)

  1. cindy c
    Member
    Posted 1 year ago #

    Hi there,
    I've got a pages-based site built on a Quark child theme. I have structured the media queries so the header image is a background image and changes to a smaller one at certain breakpoints. The nav also changes accordingly.

    My question now is how to do the same with the logo. I am using an image instead of a text tagline, and I do have it at different sizes, but I can't figure out how to target that image to switch it out, or if that's possible.

    From searching this forum I have found this from the theme creator very helpful:

    2. The theme is responsive, straight out of the box. If you view the demo theme (linked above), you'll see it change sizes on different devices. If you add a fixed height to something however, such as making the banner a fixed height of 420px for example, then that will stop it shrinking/enlarging as the browser width changes.

    3. The media queries I've added are based on the default design. So, instead of using fixed sizes, such as 768px for example, I've added media queries where the design "breaks". If you change the design significantly then you may have to adjust these media queries accordingly.

    Here is my site: http://djxstation.com/wp/

    Is this something I can/should change with media queries or do I need to use scripting? If scripting, should I use an alternate template part and change the get_header() function to call a different header file based on the media query? Or is that overkill and convoluted? Any ideas would be greatly appreciated! Thank you!

  2. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    Hi Cindy,

    Since the size of your logo is fairly small (230x136px), you probably don't really need to switch it out at all. It should display fine, even when down at mobile size.

    If you specifically do want to change it out, then I'd recommend having a read of the following couple of articles. Unfortunately, there's no easy "one solution fits all" for responsive images at present. The solution you decide to go with depends on a number of factors.

    Which responsive images solution should you use?
    http://css-tricks.com/which-responsive-images-solution-should-you-use/

    Choosing A Responsive Image Solution
    http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

  3. cindy c
    Member
    Posted 1 year ago #

    Hi Anthony,
    Thanks for your reply. I think the logo looks huge on a mobile screen, it doesn't shrink down - takes up almost half of the mobile screen.
    I'll read through the articles and figure out which way is best.

    Thanks again,
    Cindy

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic