Logo become small in tablet view

edited September 2017 in Theme support
Hi, 

My site : mindatrafik.com/fas

Please help me, why our logo become small in tablet(Ipad) view and also by using MacBook View?


and


This is normal view using windows desktop




Comments

  • Hi,
    have you uploaded the retina logo in theme options>logo??
    thanks
  • yes we already uploaded retina logo in theme options but is seem no different...it still small in tablet view using ipad.
  • It looks like everything is fine, please try to check on another device or delete browser cache.
    thanks
  • Hi, the issue is not solved yet. The logo are looking good on other devices but for ipad view (in safari browser) the logo still looking small. We tried everything but so far it doesn't work well. Please help us.
  • Sorry but the amount of custom css in our website is just staggering and the problem lies within it. please disable custom css and you will see that the problem does not exist. We do not support theme cusotmization.
  • Hi Support,

    I'm still can't resolve this issue ....may i know what support can help me to solve this issue ...from my checking my logo will become small in all actual tablet platform but when i test using test site : http://whatismyscreenresolution.net/ the result shows everything find...

    Do you provide chargeble customization for this issue...

    Please Help Me ....

    Tq
  • Please remove all custom css and see if this helps, then add the css your remove again but in small chunks, then only you will be able to see what is the problem.
  • edited November 2017
    i already make as your advise. So i overcome the issue is from this css :

    #Top_bar.is-sticky .menu_wrapper {
    margin-top: -30px;
    }

    #Top_bar #logo {
    display: inline;
    }

    This css not apply to tablet.

    May i know how to make this css aplicable to tablet too?
  • Try this css 
    @media (max-width:1239px) {
    #Top_bar.is-sticky .menu_wrapper {
    margin-top: -30px !important;
    }

    #Top_bar #logo {
    display: inline !important;
    }
    }
  • This is our css, specifically to solve the logo sizing issue on IPAD.:
    Can you please help us to check why its still not working.

    it is working well for desktop, mobile phone (including iphone) and other tablet.

    The url is: www.mindatrafik.com/fas
    Somehow, when we first load the website on ipad, it is bigger at first, then it shrink back to become smaller (decrease of size).

    Since there are limit on character allowed to be posted here, i'll send the code in chunks (in few comments):

  • edited November 2017


  • /------------------------------------------------/
    /-------------[ Stickey Logo - iPad]------------/
    /------------------------------------------------/
    @media (max-width:1239px) {
    #Top_bar.is-sticky .menu_wrapper {
    margin-top: -30px !important;
    }
    #Top_bar #logo {
    display: inline !important;
    height:115px;
    }
    }

    @media only screen and (device-width: 768px) {
    /* For general iPad layouts */

    #Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo {
    height: 115px;
    }
    #Top_bar .top_bar_right .top_bar_right_wrapper
    float: right;
    margin-right: -70px;
    position: absolute;
    }
    #Top_bar #menu ul li.submenu .menu-toggle {
    float: left !important;
    display: block;
    position: absolute;
    left: 0;
    top: -50px;
    width: 48px;
    height: 115px;
    line-height: 48px;
    font-size: 30px;
    text-align: center;
    color: #d6d6d6;
    border-right: 1px solid #eee !important;
    cursor: pointer;}
    #Top_bar #menu ul li a {
    left: 48px;}
    #Top_bar #menu ul li ul li a span {
    left: 24px;}
    #Top_bar a.responsive-menu-toggle, .header-plain #Top_bar a.responsive-menu-toggle, .header-transparent #Top_bar a.responsive-menu-toggle {
    top: 50px;
    right: auto;
    }
    #Top_bar #menu {
    right: auto;
    left: 35px;}
    }
    /* ----------------------------------------------------------------------------------------------- */
    @media only screen and (min-width: 750px) and (max-width: 1249px) {
    #Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo {
    height: 115px;
    position: absolute;
    }
    #Top_bar .top_bar_right .top_bar_right_wrapper {
    float: right;
    margin-right: -70px;
    z-index: -1;}
    .mobile-tr-header #Top_bar {
    left:0;
    }
    .mobile-tr-header #Top_bar {
    top: 0px !important;
    }
    #Top_bar #menu ul li.submenu .menu-toggle {
    float: left !important;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 30px;
    text-align: center;
    color: #d6d6d6;
    border-right: 1px solid #eee !important;
    cursor: pointer;
    }
    #Top_bar #menu ul li a {
    left: 48px;
    }
    #Top_bar #menu ul li ul li a span {
    left: 24px;
    }
    }
    /* --------------------------------------------------------------------------------- */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    #Top_bar .search_wrapper {
    display: none !important;
    }
    #Top_bar .search_wrapper input[type="text"] {
    display: none !important;
    }
    #Top_bar #logo, .header-fixed #Top_bar #logo, .header-plain #Top_bar #logo, .header-transparent #Top_bar #logo {
    height: 115px;}
    #Top_bar {
    z-index: 998;
    top: 0px;
    }
    .menuo-right #Top_bar .menu_wrapper {
    margin-left: 3%;
    }
    .header-transparent #Top_bar .top_bar_right {
    top: 0px;
    right: 1%;
    }
    #Top_bar #logo img {
    z-index: 10;
    overflow: visible;
    top: 0px;
    right: 3%;
    }
    #Top_bar #logo img.logo-mobile {
    float: right;
    top: 0px !important;
    right: 1%;
    z-index: -1;
    }
    }
  • Sorry but we do not know anything more, those are mostly your customizations which are completly different from our standard styles.
    So if you want to modify the header and don't know how, you should contact with your web developer. Item Policy clearly says: Item support does not include services to modify or extend the item beyond the original features, style and functionality described on the item page. For customization services that will help you tailor the item to your specific requirements, we recommend contacting the author to see if they privately offer paid customisation services or checking out the great service providers on Envato Studio thanks
  • May i know how to contact author?
  • Hi Support,

    We are able to standardize our logo size across all platform but we having transparent header become big in desktop view.


    Here is our css :

    /----------------Desktop Logo -----------------------/

    img.logo-main.scale-with-grid {
        max-height: 100% !important;
        max-width: 100% !important;
        width: 88px;
        height: auto !important;
    }
    div#Top_bar {
        height: 170px !important;
    }

    /----------------Ipad Logo -----------------------/

    @media only screen and (min-device-width : 768px) and (max-device-width : 1239px)  {
        img.logo-main.scale-with-grid {
        max-height: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    #Top_bar .logo {
        margin-right: 0px !important;
        padding-right: 0px !important;
        right: -20px !important;
    }
    #Top_bar .logo {
        margin-right: 0px !important;
        right: -20px !important;
    }
    }

    kindly help us on this...

    Tq
  • Try adding this css
    #Wrapper div#Top_bar {
    height: auto !important;
    }
  • Hi Support,

    Thank You, it's working.
Sign In or Register to comment.