Logo Size in Boss Pro Theme

[Tree78]

Guys,

trying to make the logo a little bigger in Boss Pro theme. How would I do that? Thank you in advance.

[Henrik Blomgren]

On what occurance do you want to make the logo a little bigger? Since I´m guessing it´s on desktops with a width of over 800px?

If you check the style.css you will find this code

@media only screen and (min-width: 800px)
.header-image .site-title > a {
    height: 72px;
    width: 200px;
}

at line 1950.

This changes the height and width of the logotype on browsers with a width of at least 800px to be 72px in height and 200px wide. Below that and it use this code

.header-image .site-title > a {
    background-position: center center !important;
    background-size: contain !important;
    float: left;
    height: 5rem;
    width: 14rem;
    background-image: url(assets/images/logo_dark.png);
}

on line 1899 in your style.css

to decide that the height should be 5rem or 50px and width should be 14rem which equalls 140px.

So to change the size of the logo in the Boss Pro theme you adjust the height and width of these two values. I´d suggest keeping the existing values as the base and then resizing accordingly so the aspect ratio stays the same.

[Tree78]

Hi Henrik,

Okay, I see all the code but the rem is throwing me me a little. I want the logo to display at a size of 225px x 146px. So it looks bigger and crisper on the site.

So :

.header-image .site-title > a {
height: 146px;
width: 225px;
}

And then what would go in the height and width of the rem area?

Is this correct and if so what numbers need to be there? Thanks in advance.

[edwardmartin]

Same problem.

[Victor Font]

10px = 1rem

146px = 14.6rem
225px = 22.5rem

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Tree78]

Thanks everyone. That seem to have worked. I appreciate it.

[Author]

Posts