increase logo size on all display sizes

7374robin · February 2022

hello, i would like to increase the logo size of my website ( https://kaurlaywer.com ) , it is way too small

i fixed the desktop version with this:

.logo-main {

max-height: 240px !important;

max-width: 240px !important;

}

but this doesnt work for mobile or tablet because some media query overwrites the css i use. how do i fix this, also right now i have removed all custom css for logo from my site. please help me

Phil · February 2022

Hi,

Sorry, but the link you have sent is not working.

Are you sure that you attached the correct URL?

Best regards

7374robin · February 2022

sorry i meant https://kaurlawyer.com/

7374robin · February 2022

i have added this as a temporary workaround

@media (max-width: 1024px) {

.logo {

display: none !important;

}

the client needs to use the site immediately

Phil · February 2022

Please, try the following one instead:

html #Header_creative #Top_bar #logo img.logo-sticky{
   max-height: 100%!important;
}
#Header_creative #Top_bar #logo{
   height: 300px!important;
}
@media only screen and (max-width:767px){
   #Header_creative #Top_bar .logo #logo img{
   max-height: 60%!important;
 }
}

Thanks

7374robin · February 2022

This has increased the size of logo on mobile but added a huge amount of space between the logo and the menu when opening it on mobile. im sure it has something to do with this code

#Header_creative #Top_bar #logo{
height: 300px!important;
}

changes are live on site

Phil · February 2022

Please, replace the last part from the previous code with the following one:

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

Thanks

7374robin · March 2022

thank you that has solved my problem

increase logo size on all display sizes

Comments