WordPress.org

Ready to get started?Download WordPress

Forums

Frontier
[resolved] Make header image responsive (13 posts)

  1. bmayer
    Member
    Posted 5 months ago #

    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

  2. CrouchingBruin
    Member
    Posted 5 months ago #

    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.

  3. bmayer
    Member
    Posted 5 months ago #

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

  4. CrouchingBruin
    Member
    Posted 5 months ago #

    Add this to your custom CSS:

    #header {
    min-height: 0;
    }
  5. bmayer
    Member
    Posted 5 months ago #

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

  6. CrouchingBruin
    Member
    Posted 5 months ago #

    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.

  7. bmayer
    Member
    Posted 5 months ago #

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

  8. maverion
    Member
    Posted 5 months ago #

    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

  9. CrouchingBruin
    Member
    Posted 5 months ago #

    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?
  10. maverion
    Member
    Posted 5 months ago #

    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?

  11. CrouchingBruin
    Member
    Posted 5 months ago #

    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.

  12. maverion
    Member
    Posted 5 months ago #

    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

  13. CrouchingBruin
    Member
    Posted 5 months ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.