Header Image Responsive

Homepage › Community Forums › Legacy Theme Support › Header Image Responsive

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 24, 2015 at 1:33 am #15395
    Andykev
    Customer

      I am a bit perplexed. I have set up two websites, one with Epik, and one with Legacy. The Epik is perfect (I could have used it for both, but wanted to get the Legacy as it more closely matched the Genesis Education 1.0 theme we were replacing).

      Reason for upgrading was the Google “mobile responsive friendly” warning everyone is getting.

      Couple things. Epik menu shrinks down on a mobile phone, with the little “menu” box which expands with a drop down. Unfortunately, Legacy did not. So I used the “Slick Nav” jquery and carefully followed the steps (http://wpbeaches.com/using-slick-responsive-menus-genesis-child-theme/). Had some trouble, Legacy did not like creating a separate slicknav.css file, or I didn’t place it correctly. It did show properly in the admin panel of WP. I added the .php and moved the .css to the main and voila!! Works perfectly.

      Now I can’t for the life of me get the header image to resize as it does in Epik. Am I missing something? I added this:

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

      …but nothing happens. It did on the Epik theme. So?

      http://www.unitedsportsmen.com

      March 24, 2015 at 5:21 pm #15465
      Wes
      Moderator

        Try adding this to your CSS and let me know if everything works ok – 

        #head-wrap .site-header {
	background-size: contain !important;
}
        April 1, 2015 at 12:12 am #15505
        Andykev
        Customer

          OK I added that code to the Epik theme I also have, and it worked. However, this doesn’t seem to work on Legacy. The header logo resizes down, but there is a bit which seems cut off on the right hand size. Now I made the logo exactly the width of the logo, and perhaps (using Adobe) I should have padded it a bit.

          I did discover another issue with resizing. On my pages, I have text on the left with a slider on the upper top right. It looks fine on a desktop, but was not properly formatted on an Iphone. The markup was carried over from the Genesis Education 1.0 theme which is not responsive. So I played around and found this:

          <div style=”width: 500px; float: left;”>

          */page text here on left side/*

          <div style=”width: 500px; float: right;”>[soliloquy id=”7592″]</div>

          */ slider short code for right column /*

          CHANGED IT TO:

          <div style=”width: 50%; float: left;”>

          */page text here on left side/*

          <div style=”width: 50%; float: right;”>[soliloquy id=”7592″]</div>

          */ slider short code for right column /*

          Now the page is formatted perfectly on all sizes.

          I am using the Column classes on another page, and this 50% “style=”width” on this page. Which is preferred? They both work, so I am happy to have learned something new.

          April 2, 2015 at 8:15 am #15578
          Wes
          Moderator

            The percentages would probably be preferred if you want everything to look good and adjust to different browser sizes.

            May 12, 2015 at 9:17 pm #15818
            dcommand
            Customer

              Hi,
              I was reading this thread and added the code.

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

              It made the header responsive but there is a huge white area under the logo-header. Is there a way of removing the white area.

              vailautodetail.com

              Thanks for the help love the legacy design.

            • Author
              Posts
            Viewing 5 posts - 1 through 5 (of 5 total)
            • You must be logged in to reply to this topic.