Header logo in mobile version too small

When you view my website on a phone, the logo at the top goes really small and does not look good in comparison to the rest of the site. The header font is larger than my logo. Please look at http://exceptionallyyours.ca/

How can I fix this?

 

Hello,

Greetings from InkThemes!

Please paste the code given below in Custom CSS field of your dashboard.

Code:

@media only screen and (max-width: 480px){
#logo img {
    max-height: 100%;
    width: 100%;
}
.container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}
}

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

Hmm, it made it bigger but it's blurry now and not centered.

 

Kindly try below code in the custom CSS field:

Code:

@media only screen and (max-width: 480px){
#logo img {
    max-height: 50px;
}
}

This will resolve your issue,

Warm Regards!
Naveen Kolhe
InkThemes.com

 

Still not working properly, this is what it looks like now:

 

Alright..!

Try the below code instead of the last one,

Code:

@media only screen and (max-width: 480px){
#logo {
    text-align: center;
    height: auto;
}
}

This will resolve your issue,

Warm Regards!
Naveen Kolhe
InkThemes.com

 

Thank you Naveen! That worked perfectly.

Can you also give me code so that "Dr. Kimberly Maich" shows on mobile? It doesn't need to be all of the text that is shown on desktop version, but I would like some writing on the paper background when viewed in mobile.

 

Hi,

I would like to inform you that, the slider caption becomes unreadable for small screens and that's why we hide the information for mobile screens.

Still, you can try to display heading with below code:

Code:

@media only screen and (max-width: 480px){
.slider_text_container {
    display: block;
}
.slider_text_container h2 {   
    font-size: 1em;
    margin-top: -32px;
    line-height: 1;
    margin-bottom: 1em;
    max-height: 76px;   
}
}

Hope this will work for you.

Warm Regards!
Naveen Kolhe
InkThemes.com

 

Hi Naveen
My header banner looks perfect on my laptop, but is very small on a mobile device. I have tried these CSS codes, but none of them make any changes.
I would like the logo to be
1. bigger on the mobile device
2. centred on the mobile

Thank you

 

Hi

Thank you but no, it still hasn't made any difference on a mobile screen - It is still very small and to the left.
http://collettsmart.com

 

Hi
Please could someone provide me with a fix? None of the above codes make any difference to the size of my header on a mobile phone. It is still very small.
Thanks

 

Could you please try the below code in custom CSS field.

Code:

@media only screen and (max-width: 640px){
.header .logo .img{
  max-width:150%;
}
}

I hope this will work for you.

Regards!
Naveen Kolhe
InkThemes.com

 

Thanks for the reply Naveen
No - it is still the same.

The new CSS doesn't seem to make any change on the mobile.
Thanks

 

Hello .. .having the same issue. Mobile logo is very small. See staging server: http://1b3.edc.myftpupload.com
Tried very last CSS above and it had no effect.