Forum has been created to help all our customers in properly working our theme. We offer complete help with configuration theme and make default look, just like on our Be|theme demo. We don`t offer theme customization.


Before creating a new discussion, please:
1. Check on forum if discussion hasn`t been created before. Use the forum Search on the right.
2. Read carefully the documentation included to package.
3. If you didn`t find what you need and would like to post a new question click the "Start a New Discussion" button on the right.
4. You can post on forum only after registration (you need purchase code to register) .


NOTE!!! If you are starting a new topic and have got problems with your site and you want us to check what`s wrong please always give url to your site because without that we can`t check what`s wrong. Each case may be different because of your installed plugins, servers or other things.


IMPORTANT!!! Along with your inquiry, please attach the address of the page which concerns the question. This will cause the time to answer on your question will be much shorter. If you do not want to publish your address publicly in the forum, please send a private message. Thanks!

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

  • Please sign in to see answear!
  • yes we already uploaded retina logo in theme options but is seem no different...it still small in tablet view using ipad.
  • Please sign in to see answear!
  • 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.
  • Please sign in to see answear!
  • 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 sign in to see answear!
  • 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?
  • Please sign in to see answear!
  • 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;
    }
    }
  • Please sign in to see answear!
  • 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
  • Please sign in to see answear!
  • Hi Support,

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