# Customising the Logo
As I didn't like the default position of the logo that can be added in the site settings, I looked into the necessary classes to adjust variables such as the size and position.
The two relevant classes for adjusting the logo's size and position are:
- ```.site-body-left-column-site-logo img```
Use this class to target the logo itself, meaning it's height, width, etc.
By default its size properties are set to ```Auto```.
- ```.site-body-left-column-site-logo```
This is the container the logo is placed in.
These are the settings that I currently use for my logo in **.svg** format:
``` CSS
.site-body-left-column-site-logo img {
width: 100px;
filter: var(--logo-mode);
}
.site-body-left-column-site-logo {
text-align: left;
}
```
The filter is a variable for a filter that inverts the logo depending on the theme used (dark or light).
```CSS
.theme-light {
...
--logo-mode: invert();
}
```
Additionally I added this line to hide the logo on mobile devices:
```CSS
.site-header-logo {
display: none;
}
```