Responsive image header

[sboulou]

Hello,
On my web site I have insert a logo on header left as you can see
below (in my custom css) but it is not not really responsive, do you have a solution to help me ?

.header-image .site-title > a {
background: url(images/logo.png) no-repeat left;
float: left;
height: 100px;
width: 371px;
}

http://help-papiers.fr/

[Marcy]

Do you want the logo to be smaller at smaller screen sizes?

If so, you would choose the media query you want it to be smaller, and add something like:

.header-image .site-title > a {
    height: 50px;
    width: 100%;
    background-size: contain;
}

You can change the height to any size that you like.
You will also want to change the min-height of

.site-header {
    min-height: 100px;
}

If you want it centered, you need to remove the line "float: left" in your main section, and add
background-position: top center;
to

.header-image .site-title > a {
   background-position: top center;
   height: 50px;
    width: 100%;
    background-size: contain;
}

---

Marcy | Amethyst Website Design | Twitter

[eMove]

You should fix your logo size in media query or you can use class="img-responsive" if you are using bootstrap.

---

Interstate Removalists | Removal Quotes

[sboulou]

Thanks a lot for your Help Marcy !!

[Marcy]

You're welcome! Glad to help.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts