Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 4, 2015 at 5:32 pm #439133
    msbllc

    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?

    May 5, 2015 at 9:14 am #439570
    Rikard

    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

    May 5, 2015 at 4:04 pm #439789
    msbllc

    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

    May 6, 2015 at 8:17 pm #440621
    msbllc

    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!!

    May 6, 2015 at 9:15 pm #440658
    mrshaffly

    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, 7 months ago by mrshaffly.
    May 7, 2015 at 10:04 am #440855
    Rikard

    Hey @msbllc!

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

    Best regards,
    Rikard

    May 7, 2015 at 4:00 pm #441017
    msbllc

    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?

    May 7, 2015 at 4:17 pm #441036
    msbllc

    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;
    }

  • Author
    Posts
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.