StyledThemes

Site Logo vs. Title & Tagline vs. Header Image

Home Forums WordPress Themes – Premium Pure & Simple Site Logo vs. Title & Tagline vs. Header Image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #15814
    Rene
    Member

    The logo image is not responsive.

    Work-a-round: The Header Image “is” responsive, so remove title and tagline text and use header image as my logo. Problem: when I remove the site title and tag line text, the header changes height.

    Ideally the Logo would be responsive and removing the title and tagline text would not change the header image height.

    Suggestions?

    #20938
    Rene
    Member

    It looks like the header height is set to a specific height so when there in no logo or title/tag line text it gets smaller.

    #20955
    Shekhar Bhandari
    Participant

    Hi Rene,
    Yes there is specific height defined for the header although it is without site title or logo. But i am abit confused what you really want to do. Could you please send a url link and explain about your problem.

    Thanks.

    #20973
    Rene
    Member

    In the most basic terms, I’d like the logo I use in the header to be responsive …so it scales to fit the entire width of the display it is being viewed on regardless of size.

    Look at the attached screencap of your demo …see the horizontal scrollbars below the header?
    screencap-1.jpg

    Attachments:
    You must be logged in to view attached files.
    #20980
    Anonymous
    Inactive

    Hi Rene,

    We can understand your concern there and it is understandable. But we along with many developers follow the philosophy that logo size remains constant in all viewport and it should be made to fit in all screen. For example, see these two themes https://wordpress.org/themes/responsive ( most downloaded theme on wordpress.org ) and http://theme-fusion.com/avada/ ( most downloaded WP theme in ThemeForest ) .

    Off course many other developer thinks that logo size should be big or smaller according to screen.

    If you can provide us the demo link of your site then we can provide CSS which should resize your logo according to your screen size.

    #20987
    Rene
    Member

    From a developers standpoint perhaps, but from a Marketer’s standpoint, it makes no sense that a 320px wide logo be the same 320px wide on a larger screen where it looks tiny. I mean, why would you even need responsive images anywhere if they always remained the same size regardless of screen resolution? Look at your slideshow …it is responsive and looks great on all screen sizes.

    You guys have done a great job on this theme and that’s why I purchased it. But for some feedback… to me, a theme should be either completely responsive or not. In your case, it is responsive except for this logo area so it is not truly responsive.

    I’ll use your “email support” and sent access info. Thanks for the help!

    #20988
    Shekhar Bhandari
    Participant

    Hi Rene,
    To make the logo responsive you should put the following CSS to the child theme css files.

    @media (max-width:600px) {
    .header-inner {
      -moz-transform:scale(0.8,0.8);
      -webkit-transform:scale(0.8,0.8);
      -o-transform:scale(0.8,0.8);
      -ms-transform:scale(0.8,0.8);
      transform:scale(0.8,0.8);	
      }
    }
    @media (max-width:400px) {
    .header-inner {
      -moz-transform:scale(0.45,0.45);
      -webkit-transform:scale(0.45,0.45);
      -o-transform:scale(0.45,0.45);
      -ms-transform:scale(0.45,0.45);
      transform:scale(0.45,0.45);
    }
    @media (max-width:300px) {
     .header-inner {
      margin-left:-50px;
      }
    }
    

    Thanks.

    #21038
    Rene
    Member

    Shekhar,

    Thanks for the css snippet. This worked perfectly in chrome, safari, opera, but does not work in firefox or IE.
    http://fauxirondirect.com

    #21046
    Shekhar Bhandari
    Participant

    Hi Rene,
    While Looking at your site, i found that your header image is large, So, you can add this custom CSSin the child theme to make that work.

    .logo img {
       width:100%;
    }
    
    #15815
    Rene
    Member

    Now we are talking! That worked, thank you Shekhar!

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