Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #439133

    Hey guys,

    I have a client that is pretty picky on the size of the logo. They like the way it appears on FireFox, however on Safari and Chrome it shrinks a little smaller. They still want the logo to shrink when you scroll down (pretty standard feature in enfold) however when the browser is to the top the logo should appear rather large.

    Any suggestions or pointers to make it appear the same size/dimension across all browsers?

    #439570

    Hey msbllc!

    I can’t see any real difference between Chrome and Firefox, could you provide us with screenshots highlighting the issue please?

    Best regards,
    Rikard

    #439789

    Hey Rikard!

    Thanks for responding. Here is a link to the img. On my monitor the top is from Firefox and the bottom one is what it appears on both Chrome and Safari. Firefox is showing it pretty full width in the container, however both Chrome and Safari shrink it some.

    Thoughts?

    Screen shot of website header for madow

    #440621

    Hey guys,

    Anybody know pointers or things I can try? Is there specific css? I’ve tried .logo { } but not avail…

    Does anybody have any thoughts?

    Thank you so much!!

    #440658

    I had the same problem and they gave me this:

    .html_header_top.html_logo_center .logo {
      left: 0;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
    }

    However, the logo that should have filled the spaced from container edge to container edge is now off to the right just a tad in Firefox. Yours isn’t as big so likely it would work.

    (Edit, I added right: 0; and that fixed the entire issue in all browsers.)

    • This reply was modified 9 years, 6 months ago by mrshaffly.
    #440855

    Hey @msbllc!

    Did you try out the suggestion above and did you have any luck with it?

    Best regards,
    Rikard

    #441017

    Thanks @mrshaffly and @Rikard ! That seemed to resolve the sizing issue across all browsers. However, it’s aligning it to the left now. I tried both
    align: center;

    and

    text-align: center;

    and

    margin-left: auto;
    margin-right: auto;

    however none of these worked. Do either of you guys have a suggestion on what to use to make it align center?

    #441036

    Nope, never mind guys. I figured it out!

    If anybody in the future is reading this post mrshaffly offered great code solution

    .html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    }

    but the aligning was off. I had to add this and change the display to inline by adding this…

    .logo img {
    padding: 0;
    display: inline;
    width: auto;
    height: auto;
    image-rendering: auto;
    position: relative;
    z-index: 2;
    transition: opacity 0.4s ease-in-out;
    }

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘HOW DO I FIX?!?!? – Logo resizing different on browsers’ is closed to new replies.