Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #275744

    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!

    #275745

    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

    #275797

    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 6 years ago by Yigit.
    #276013

    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

    #276075

    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.

    #276076

    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

    #276081

    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!

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