Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #250359

    Hello people,

    I’ve just published another website with your template Enfold. The site uses the centered logo with menu underneath. In IE it looks fine (although the logo shows somewhat smaller than the Original size but that’s no problem, it looks fine) but in Google Chrome and with Android devices the logo is too small with an unwanted space underneath the logo. I have no idea what the cause of this may be. Anybody who has a clue?

    Regards,
    Erik

    #250362
    This reply has been marked as private.
    #250433

    Hi!

    Thank you for the link.

    If you don’t mind, what kind of android device are you testing this with? We ask because we need to know the screen resolution of the device. Regarding the link, you can set a post as a private reply. Only you and the moderators will see it.

    Cheers!
    Ismael

    #250518

    This is on a Samsung tablet in landscape view, with normal width (so it’s not responsive resized). In Chrome it’s on a desktop as well.

    Erik

    • This reply was modified 10 years, 8 months ago by Driekus.
    #250667

    Hey!

    Thank you for the info.

    Please add this on Quick CSS or custom.css:

    @media only screen and (max-width: 1200px) and (min-width: 768px) {
    .responsive .mobile_slide_out .logo {
    float: left;
    -webkit-transform: translate(0, 0);
    left: 0;
    }
    }

    Best regards,
    Ismael

    #250724

    Hello Ismael,

    Unfortunally that code doesn’t resolve the issue. I’ve made a small drawing that hopefully explains the issue.

    Drawing of the logo positions/sizes in IE and Chrome

    Regards,
    Erik

    • This reply was modified 10 years, 8 months ago by Driekus.
    #251026

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .html_header_top.html_logo_center .logo {
    left: 0;
    -webkit-transform: translate(17%, 0);} 

    Cheers!
    Yigit

    #251050

    Thank you Yigit! That did the trick.

    Regards,
    Erik

    #251296

    Too bad, it solves the issue with the logo in Chrome but I just saw in IE that this code pushes the logo to the left side of the screen.

    Any idea how to prevent that happening in IE?

    Regards,
    Erik

    #251304

    Hey!

    Please try adding following code to Quick CSS as well

    .html_header_top.html_logo_center .logo { left: 50%!important\9; }

    Regards,
    Yigit

    #251312

    Hello Yigit,

    I’m sorry, that doesn’t resolve the issue. In IE the logo isn’t just pushed to the left side of the screen, a part of the logo is even pushed over the edge of the screen. The logo gets cut off.

    Regards,
    Erik

    #251791

    I think it’s solved thanks to the idea of Yigit. I’ve googled for the webkit-transform codes and came up with:

    .html_header_top.html_logo_center .logo {
    -webkit-transform: translate(-50%, 25%) scale(1.5,1.5);
    }

    This shows the logo correct in Chrome and it looks fine in IE as well.

    UPDATE 17-04
    By chance I saw that the code above did show the logo in the right way, but it caused the menu stop working as well. This seemed to be caused by a resizing in height of the logo class. I’ve been puzzling and changed the code in:

    .html_header_top.html_logo_center .logo {-webkit-transform: translate(-50%, 0) scaleX(1.5);}
    .html_header_top.html_logo_center .logo img{-webkit-transform: translate(0,25%)scale(1,1.5);}

    Now the logo as well as the menu are both fine.

    Regards,
    Erik

    #251800

    Hi Erik!

    Glad you figured it out and thanks for sharing! Let us know if you have any other questions or issues :)

    Regards,
    Yigit

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Logo showing too small in Chrome’ is closed to new replies.