WordPress.org

Support

Support » Themes and Templates » [Resolved] Make header image responsive

[Resolved] Make header image responsive

  • Hi,

    I uploaded a header image via Appearance > Customize for this site: http://fitzroysoccer.com/

    If I view the site on a mobile device the banner isn’t responsive and only shows a portion of the image. Is there a way to make this responsive?

    Thanks,
    Belinda

Viewing 12 replies - 1 through 12 (of 12 total)
  • Instead of using a background image for the header, upload a logo that has the dimensions that you want. Go to Frontier Options > Logo. The logo will resize itself correctly.

    Thanks, that resizes it but now I have a huge white space between the image and the menu. My image is 960×142

    Add this to your custom CSS:

    #header {
    min-height: 0;
    }

    Sorry to be a pain, but on the mobile device there’s still a big white space between the image and the menu.

    Take this out of your custom CSS:

    Add this to your custom CSS:

    You just wanted to add the part in gray from the previous post.

    Hanging head in shame that I didn’t notice I cut and paste the top line. Thanks so much. Issue fixed!

    Hello.

    I want to make my header responsive, but I have the header in three different sizes to switch at the breaks, how do I do that in this theme?

    thanks for any help!

    Maria

    1. What are the sizes of your images? And when you say, “switch at the breaks,” do you mean at certain viewport widths (tablet & phone)?
    2. Did you upload all of them, and is one of them is currently your header logo?
    3. Can you post a link to your site?

    yes, the viewport widths. I have the banner that goes across the top, which is loaded in the logo spot, so it does shrink, but doesn’t look good. I have loaded the other headers into the media library. The site is under construction, so it’s not live. I don’t want to post a link to it here. Can you answer the question without that?

    Yes. You’ll have to add some JQuery by using a script-enabling plugin, like Header and Footer. Once you install the plugin, go to Settings > Header and Footer and copy this code into the Code to be added before the end of the page field:

    <script>
    jQuery(document).ready(function($){
    
    var ViewPort = {
       MOBILE : 400,
       TABLET : 720,
       DESKTOP : 1024
    }
    var currentViewPort = ViewPort.DESKTOP;
    
    function setLogo() {
       var iWidth = $(window).width();
    
       if ((iWidth <= ViewPort.MOBILE)
          && (currentViewPort != ViewPort.MOBILE))
       {
          $("#header-logo img").attr("src","/wp-content/uploads/2013/10/mobile_header.jpg");
          currentViewPort = ViewPort.MOBILE;
       }
       else if ((iWidth > ViewPort.MOBILE)
          && (iWidth <= ViewPort.TABLET)
          && (currentViewPort != ViewPort.TABLET))
       {
          $("#header-logo img").attr("src","/wp-content/uploads/2013/10/tablet_header.jpg");
          currentViewPort = ViewPort.TABLET;
       }
       else if ((iWidth > ViewPort.TABLET)
          && (currentViewPort != ViewPort.DESKTOP))
       {
          $("#header-logo img").attr("src","/wp-content/uploads/2014/03/desktop_header.jpg");
          currentViewPort = ViewPort.DESKTOP;
       }
    }
    
    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(setLogo, 100);
    });
    
       setLogo();
    });
    </script>

    So the things you need to change are the widths (the sample code above has 400 and 700 as the breakpoints; the third value is ignored) and the URL of the images that you want loaded.

    Thanks CrouchingBruin!

    Once I got out of my own way and got everything in the right place, it worked like a charm! So if I ever want to add several other sizes, I can just copy the code to add them, right?

    Maria

    Yes, hopefully the code is easy enough for you to understand so you can add other sizes. You’ll just need to add the size to the ViewPort array at the top, then add a section in the long if … else chain. Glad it worked out.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] Make header image responsive’ is closed to new replies.