CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user6765791
user6765791

Reputation:

Bootstrap logo isn't responsive

If I shrink my screen size, the logo will either be very small and work on mobile phones or very large and work on desktops and looks BLURRY. How can I get the logo to be fluent on all screen sizes, including tablets? The logo size is 793 x 150 pixels, it is a wide logo. This size is just what is uploaded on the server, of course it is a lot smaller on the actual site so it fits in the navbar.

The logo is added in HTML like this:

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example"></a>

CSS:

header .navbar-brand {
    padding-top: 7px;
    padding-bottom: 7px
}
header .navbar-brand>img {
    height: 46px
}
header .navbar-brand>img {
        height: auto;
        width: 135px
}

Upvotes: 0

Views: 598

Answers (1)

Mark Wilson
Mark Wilson

Reputation: 1354

Add the img-responsive class to img tag. And set a specific width to anchor tag if needed.

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example" class="img-responsive"></a>

CSS:

.navbar-brand {
   max-width: 60px;
}

The class img-responsive applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

Read more about it here:

http://getbootstrap.com/css/#images-responsive

Looking at your site do the following changes:

Remove codes from

custom.css line 699

header .navbar-brand > img {
   height: 200px;
}

style.css 5105

.navbar-brand > img {
    display: block;
}

Use this:

style.css 2091

.navbar-brand {
    float: left;
    padding: 12px 15px;
    font-size: 19px;
    line-height: 21px;
    height: 62px;
    max-width: 200px;
    display: table;
}

Edit the html:

<a class="navbar-brand" href="http://soldmymac.com/"><span><img src="http://soldmymac.com/resources/imgs/logo.png" alt="Sold My Mac" class="img-responsive"></span></a>

And add the css:

.navbar-brand span {
   display: table-cell;
   vertical-align: middle; // This will keep the logo vertically in the middle
}

And one last thing....

LEARN CSS IF YOU GOT TIME. IT IS EASY.

Upvotes: 1

Related Questions