In order to enlarge your website logo for mobile devices / screen. You’ll need to add this CSS code inside Theme Options -> General -> Additional CSS field. Just copy/paste this CSS code:
For devices with the maximum view port of 670px paste this code:
1 2 3 4 5 6 7 8 9 | @media only screen and (min-width: 200px) and (max-width: 670px) { .site-branding img { max-width:320px; max-height:56px; } .main-header {height:80px;} } |
And for tablet devices and other with the view port of 1023px at maximum, just add this code:
1 2 3 4 5 6 7 8 9 | @media only screen and (min-width: 670px) and (max-width: 1023px) { .site-branding img { max-width:640px; max-height:118px; } .main-header {height:140px;} } |
Please note that the values used in this code are for example and you will need to adjust the width and height as well as the height of main header area manually and according to your needs.