Custom Header Responsiveness

Homepage › Community Forums › Epik Theme Support › Custom Header Responsiveness

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 17, 2014 at 4:13 pm #11340
    jack
    Customer

      Hi Wes,
      The url I am working with is http://besearched.biz/texasstarhomeinspections.

      I changed the functions.php header parameters to:
      // Add support for custom header
      add_theme_support( ‘genesis-custom-header’, array(
      ‘width’ => 825,
      ‘height’ => 260
      ) );

      as that is my header image size.

      I also adjusted the header size in the CSS to:
      .title-area {
      font-family: “Open Sans”,sans-serif;
      font-weight: 700;
      float: left;
      padding: 0;
      padding: 0;
      width: 825px;
      }

      I’m not sure why, but the header image does not resize at all. I’ve been using http://www.studiopress.com/responsive/ to check it to no avail.

      Can you please tell me where I’ve gone wrong..and hopefully how to fix it?

      Thanks,
      Doug Seese
      Jack Hamilton
      BeSearched.com
      doug@besearched.com

      March 18, 2014 at 2:17 pm #11357
      jack
      Customer

        Just checking as it’s been close to 24 hours….any progress on the described issue?

        March 18, 2014 at 10:53 pm #11368
        Eric
        Customer

          Background images don’t resize by default. Inline images do as you’ve noticed from the demo, but background images can only resize if you add css for it. You can try adding this to your css – 

          
.site-header {
    background-size: contain !important;
}

          I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

          March 19, 2014 at 11:13 am #11383
          jack
          Customer

            Thank you Eric, that was quite helpful and sent me in the right direction.

            Epik’s header required a bit more info for the site title as well for the area used
            when inserting the header image via Dashboard. Below is what I used to make this work by
            placing that code in the 480 and 580 @media sections.

            .header-image .site-title a {
            float: left;
            min-height: 110px;
            width: 100%;
            }

            .header-image .site-header,
            .header-image .site-header .wrap {
            background-size: contain !important;
            }

            The minimum height can be adjusted depending on what is within the
            header right widget area.

            For the @media sections of 767 or larger, I only needed this added:

            .header-image .site-header,
            .header-image .site-header .wrap {
            background-size: contain !important;
            }

            Hope this also helps others that desire to use custom headers with the Epik theme
            for mobile responsive.

            March 19, 2014 at 8:38 pm #11390
            Eric
            Customer

              Awesome! Thanks for posting that.

              I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

            • Author
              Posts
            Viewing 5 posts - 1 through 5 (of 5 total)
            • The topic ‘Custom Header Responsiveness’ is closed to new replies.