Overview

...

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

Image Added

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

Image Added

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

Image Added

 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.

Image Added