-
AuthorPosts
-
April 11, 2014 at 7:48 pm #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,
ErikApril 11, 2014 at 7:50 pm #250362This reply has been marked as private.April 12, 2014 at 4:17 am #250433Hi!
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!
IsmaelApril 12, 2014 at 1:32 pm #250518This 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.
April 13, 2014 at 7:42 am #250667Hey!
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,
IsmaelApril 13, 2014 at 10:27 am #250724Hello 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.
April 14, 2014 at 1:14 pm #251026Hi!
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!
YigitApril 14, 2014 at 1:59 pm #251050Thank you Yigit! That did the trick.
Regards,
ErikApril 14, 2014 at 8:44 pm #251296Too 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,
ErikApril 14, 2014 at 9:13 pm #251304Hey!
Please try adding following code to Quick CSS as well
.html_header_top.html_logo_center .logo { left: 50%!important\9; }
Regards,
YigitApril 14, 2014 at 9:39 pm #251312Hello 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,
ErikApril 15, 2014 at 9:20 pm #251791I 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,
ErikApril 15, 2014 at 9:55 pm #251800 -
AuthorPosts
- The topic ‘Logo showing too small in Chrome’ is closed to new replies.