This is a simple tweak to add to CSS in Divi

All you need to do is add the following CSS snippet to your Child Theme stylesheet or the Custom CSS box in Divi > Theme Options and adjust the height and max-height values until you get the size you want.

@media only screen and (max-width: 980px) {
#logo {
height: 100% !important;
max-height: 100% !important;
width: auto;
max-width: 100% !important; }
}

Some points to note:

  • I think the main reason people have trouble with adjusting the size of the logo is because they don’t realise that elsewhere in their code, a max-height limit is being set. So if the max-height is set at 50% and you are trying to make the logo height 80%, you’re not going to see any change. What we are doing here is overriding the max-height settings that are placed elsewhere.
  • Make sure your max-height value is the same or larger than your height value or again you won’t get your desired outcome.
  • Make sure your logo image file is large enough to display at your desired size or its going to get blurry.
  • If you just want a larger logo on mobile then you can adjust the media query max-width value down to something like 480px instead of 980px.

Pin It on Pinterest