Logo size on mobile site

mdental · August 2015

Hi,

My logo size is fine on the PC screen, but it's too small on a mobile/tablet screen. Is there anyway to change this? I've looked through the discussion forums and tried to add CSS but nothing seems to change it at all.

My website is www.mascotdentalclinic.com.au

Thanks!

Albert · August 2015

Hi,

yes, it is possible to increase logo size for smaller screens only but please remember that whole top bar height will be increased as well. So if this is what you want, then use below css please:

@media only screen and (max-width: 959px) {
    #Top_bar .logo #logo img { max-height: 100px !important; }
    #Top_bar #logo { height: 100px !important; }
}

mdental · August 2015

Great, thanks for that!

mdental · August 2015

Hi,

Now as the browser width on the PC is reduced, the logo now jumps to a very small size and then to the larger size. How can I make this consistent so it is just the one size (the larger size) throughout?

Thanks.

Albert · August 2015

Instead of 959px, choose the own width when you want to display logo large.

mdental · August 2015

Thankyou! I've now got a test page where I have a banner at the top. When the browser is resized, the banner gets squashed... is there a way to not let it get squashed?

http://www.mascotdentalclinic.com.au/cosmetictest/

Thanks!

Albert · August 2015

This is how scale with grid class works and it is not possible to change this behave. But in our opinion this banner at the top "Cosmetic Dentistry" looks great on smaller devices as well.

Logo size on mobile site

Comments