logo without margins

teubl · March 2016

Hi there,

Our logo contains a horizontal bar that goes on accross the whole screen. Now i'd like to the logo flush to the sides of the screen. How can i remove the margin?

i've tried

#Top_bar {
margin: -50px;}

but thats totally not a responsive ooption, unfortunately.

Thanks!

Albert · March 2016

Hi,

please send us link to page where you want to remove margin/padding for logo.

teubl · April 2016

Hi there,

I've set up a live sample @ http://silberseeex.lassooydesign.nl/ . Here you can see the logo + long horizontal line.

Now is there a more efficient way of making this logo + line responsive?

Thanks, Ed'

Below you find a snippet of the custom css, but it's a lot of code:

@media only screen and (min-width: 770px){

.header-overlay .overlay-menu-toggle {margin-top: -30px;}
}

#Action_bar {
    top: 35px;
    left: 225px !important;
    background-image: url("http://silberseeex.lassooydesign.nl/wp-content/uploads/2016/03/silbersee-logo-bg.png");
    background-repeat: repeat-x;
    height: 48px;
    }

@media only screen and (min-width: 1240px){
    #logo {
    margin-top: -49px !important;
    margin-left: -50px !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width:1239px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -175px !important;
    }
}

@media only screen and (min-width: 1150px) and (max-width:1199px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -150px !important;
    }
}

@media only screen and (min-width: 1100px) and (max-width:1149px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -125px !important;
    }
}

@media only screen and (min-width: 1045px) and (max-width:1099px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -100px !important;
    }
}

@media only screen and (min-width: 1000px) and (max-width:1044px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -75px !important;
    }
}

@media only screen and (min-width: 960px) and (max-width:999px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -50px !important;
    }
}

@media only screen and (min-width: 935px) and (max-width:959px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -150px !important;
    }
}

@media only screen and (min-width: 885px) and (max-width:934px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -135px !important;
    }
}

@media only screen and (min-width: 845px) and (max-width:884px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -115px !important;
    }
}

@media only screen and (min-width: 820px) and (max-width:844px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -100px !important;
    }
}

@media only screen and (min-width: 800px) and (max-width:819px) {
.top_bar_left {
    margin-top: -49px !important;
    margin-left: -85px !important;
    }
}
@media only screen and (min-width: 765px) and (max-width:799px) {
.top_bar_left {
    margin-top: -5px !important;
    margin-left: -70px !important;
    }
}

Albert · April 2016

Ok, we see what you mean but we do not have better solution that what you already did.

teubl · April 2016

Thanks for checking. Once it's set up i guess it works alright. Cheers!

Albert · April 2016

You're welcome!

logo without margins

Comments