Overview

Within every theme there is CSS that controls the max-width and max-height of the theme logo, this however is done with 3 different sets of styles. In this tutorial we will go over how to inspect the element and what styles can be modified to change the logo size.

For this example we will use the "Woodland" theme. 

Inspecting the element

For this example we are using Chrome as the browser so we can use the default Inspect tool by right clicking on the element we would like to inspect. In this case the site logo.

Doing this will allow the developer tools console to display. For now we want to focus on the right hand side of the information that provide the css elements that are being used.

As you can see there are three (3) sets of css for this one element to control the max-width and max-height of the logo

CSS Blocks

We always want to make sure to start with the smallest first set first and then move to the css needed for larger displays.

#main-header .company-logo img {
    max-width: 110px;
    max-height: 30px;
}

@media only screen and (min-width: 40.063em) {

  #main-header .company-logo img {
    max-width: 220px;
    max-height: 60px;
  }
}

@media only screen and (min-width: 64.063em) {

  #main-header .company-logo img {
    max-width: 220px;
    max-height: 60px;
  }
}

Override.css

So now that we know what css elements we are working with, we can now take this information and add in our own styles to the override.css file

Simply click on "override.css" file name to edit the file. You should see the screen below.

Now that we have the override.css file open we can now add our new styles to change the CSS.

 Now that we have saved our overrides we can go back to the site and inspect our logo again to see our changes in place.