Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 6, 2014 at 6:47 pm #275744
    odmv

    Hi!

    I’m making some tests of the site in smartphones, and I noticed the logo is bigger than the actual screen size, so it only displays a part of it (like 4/5), is there any way to fix this, so the logo adjust in small screens?

    Thank you!

    June 6, 2014 at 6:49 pm #275745
    Yigit

    Hey odmv91!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
max-width: 80%; }}

    If that does not work, please post the link to your website

    Best regards,
    Yigit

    June 6, 2014 at 8:34 pm #275797
    odmv

    Thank you for the quick response!

    It improved, but now the logo is under the “Menu” button (the one with 3 bullets and 3 lines).
    The website is domain

    • This reply was modified 5 years, 10 months ago by Yigit.
    June 7, 2014 at 7:35 am #276013
    Ismael

    Hey!

    Thank you for the update.

    Please add this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
margin: 0 auto;
max-width: 90%;
height: 75px !important;
max-height: 75px !important;
}

.responsive.html_header_top #header_main .social_bookmarks {
margin-top: 0;
display: block;
position: relative;
width: 100%;
clear: both;
right: 0;
}

#advanced_menu_toggle, #advanced_menu_hide {
top: 35%;
}
}

    Best regards,
    Ismael

    June 7, 2014 at 4:17 pm #276075
    odmv

    Hi!

    Thanks again, now I can see the social media icons (that’s great!), and the header improve. In smartphones I continue having the problem of seeing the “Menu Button” above the logo (I tried in a Nokia Lumia 920 and in a HTC One), and then again in the iPhone 5 the logo appears a little cut (the last letter doesn’t appear). I’m not sure, but maybe if the logo is in the left edge it could fix the error.

    June 7, 2014 at 4:26 pm #276076
    Yigit

    Hey!

    Please change the first part of the code Ismael posted to following one

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
max-width: 80%;
height: auto !important;
margin-top: 10px!important;
}

    Cheers!
    Yigit

    June 7, 2014 at 5:39 pm #276081
    odmv

    Problem solved!

    I only did a little change in the code, because in 80% I still had problems in the iPhone browser; I changed it to 72%, and now works just great.

    Thanks a lot your help!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Logo in smartphones’ is closed to new replies.