Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 11, 2014 at 7:48 pm #250359
    Driekus

    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

    April 11, 2014 at 7:50 pm #250362
    Driekus
    This reply has been marked as private.
    April 12, 2014 at 4:17 am #250433
    Ismael

    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

    April 12, 2014 at 1:32 pm #250518
    Driekus

    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, 7 months ago by Driekus.
    April 13, 2014 at 7:42 am #250667
    Ismael

    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

    April 13, 2014 at 10:27 am #250724
    Driekus

    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, 7 months ago by Driekus.
    April 14, 2014 at 1:14 pm #251026
    Yigit

    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

    April 14, 2014 at 1:59 pm #251050
    Driekus

    Thank you Yigit! That did the trick.

    Regards,
    Erik

    April 14, 2014 at 8:44 pm #251296
    Driekus

    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

    April 14, 2014 at 9:13 pm #251304
    Yigit

    Hey!

    Please try adding following code to Quick CSS as well

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

    Regards,
    Yigit

    April 14, 2014 at 9:39 pm #251312
    Driekus

    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

    April 15, 2014 at 9:20 pm #251791
    Driekus

    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

    April 15, 2014 at 9:55 pm #251800
    Yigit

    Hi Erik!

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

    Regards,
    Yigit

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