-
AuthorPosts
-
May 4, 2015 at 5:32 pm #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?
May 5, 2015 at 9:14 am #439570Hey msbllc!
I can’t see any real difference between Chrome and Firefox, could you provide us with screenshots highlighting the issue please?
Best regards,
RikardMay 5, 2015 at 4:04 pm #439789Hey 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?
May 6, 2015 at 8:17 pm #440621Hey 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 #440658I 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.
May 7, 2015 at 10:04 am #440855Hey @msbllc!
Did you try out the suggestion above and did you have any luck with it?
Best regards,
RikardMay 7, 2015 at 4:00 pm #441017Thanks @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 #441036Nope, 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;
} -
AuthorPosts
- The topic ‘HOW DO I FIX?!?!? – Logo resizing different on browsers’ is closed to new replies.