Logo Issue

[Lambros]

Hello!

How can I make the logo fit the header area?

I want it to fit the space between the 2 red lines marked here:

https://www.dropbox.com/s/z7ts8eurcwh2ghk/logo.png?dl=0

Thank you!

[Alyssa]

@louboulos I viewed your site and it looks like you already achieved this, please let me know if you still need help.

[Lambros]

I kinda solved it yes but in my laptop that has a smaller screen, the structure is ugly.

See here: https://www.dropbox.com/s/w518b1auqu0vs41/logomod.png?dl=0

My logo picture is 1100×300

The CSS I used is this:

.site-header #logo {
    float: left;
    height: 300px;
    padding-right: 48px;
    width: 100%;
}

.header-inner {
    min-height: 84px;
    overflow: hidden;
    padding-left: 0;
}

.header-inner, .nav-inner, .site, .footer-inner {
    margin: 0 auto;
    max-width: 1065px;
    padding: 0 30px;
}

body .site {
    margin-bottom: 50px;
    margin-right: 390px;
    max-width: 1006px;
    padding-bottom: 40px;
    padding-left: 60px;
    padding-top: 40px;
}

Is there a better way to optimize the CSS code a bit?

[Lambros]

ALso if you visit http://modmyrig.gr from mobile you can’t see anything so the CSS code needs adjustment!

[Alyssa]

@louboulos add this to custom.css:

.header-inner{padding:0 30px 0 0;}
.nav-inner{padding-left:0;}
.site{padding:0 15px;}

[Lambros]

it worked fine. Thank you!

[Alyssa]

All the padding was causing issues on smaller screens. 🙂