Logo become small in tablet view

webfassb · September 2017

Hi,

My site : mindatrafik.com/fas

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

http://prntscr.com/gnqcn6

and

http://prntscr.com/gnqd0d

This is normal view using windows desktop

http://prntscr.com/gnqddw

Bryan · September 2017

Hi,
have you uploaded the retina logo in theme options>logo??
thanks

webfassb · September 2017

yes we already uploaded retina logo in theme options but is seem no different...it still small in tablet view using ipad.

Bryan · September 2017

It looks like everything is fine, please try to check on another device or delete browser cache.
thanks

webfassb · October 2017

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.

Bryan · October 2017

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.

webfassb · November 2017

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

Bryan · November 2017

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.

webfassb · 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?

Bryan · November 2017

Try this css

@media (max-width:1239px) {
	#Top_bar.is-sticky .menu_wrapper {
margin-top: -30px !important;
}

#Top_bar #logo {
display: inline !important;
}
}

webfassb · November 2017

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):

webfassb · November 2017

webfassb · 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;
}
}

Bryan · November 2017

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

webfassb · November 2017

May i know how to contact author?

webfassb · November 2017

Hi Support,

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

http://prntscr.com/h5cgq7

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

Bryan · November 2017

Try adding this css

#Wrapper div#Top_bar {
    height: auto !important;
}

webfassb · November 2017

Hi Support,

Thank You, it's working.

Logo become small in tablet view

Comments