Correct size settings for logo

My logo looks blurry in Google Chrome but not so blurry in Firefox. The logo size is 709 x 134 pixels and this is what’s in my style.css file:

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

I already added 20 pixels to the width but that did nothing. What should I edit/change?

Hmmm. You have a max-width but a fixed height. That is going to distort the image. Try height: auto.

Also, it would be worth resizing your logo to the maximum width your going to display it at.

Gonna try both of those options now, thanks!!

1 Like

After changing the height to auto, the logo position moved more toward the top of the navbar instead of being in the middle.

I think we will need to see your markup and possibly more of the CSS.

This is my HTML:

<a class="navbar-brand" href=<?= site_url() ?>><span><img src="<?php echo site_url(); ?>resources/imgs/logo.png" alt="Logo Name" class="img-responsive"></span>

More CSS:

.navbar-brand:focus,
.navbar-brand:hover {
    text-decoration: none
}

@media(min-width:768px) {
    .container-fluid>.navbar-collapse,
    .container-fluid>.navbar-header,
    .container>.navbar-collapse,
    .container>.navbar-header {
        margin-right: 0;
        margin-left: 0
    }
    .navbar-fixed-bottom,
    .navbar-fixed-top,
    .navbar-static-top {
        border-radius: 0
    }
    .navbar>.container .navbar-brand,
    .navbar>.container-fluid .navbar-brand {
        margin-left: -15px
    }
}

.navbar-toggle {
    position: relative;
    float: right;
    padding:9px 10px;
    margin-top: 12px;
    margin-right: 15px;
	margin-bottom: 12px;
    border-radius: 2px;
        background:#333333;
}

.navbar-toggle:focus {
    outline: 0
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
}

I assumed from your first post that the CSS was actually on the img but as it’s not the height:auto is not what is needed. Will have to look more closely. However, resizing the mage to its max size will mean the browser won’t have to do it for you.

I have resized the logo to 212 x 40, so I should set those sizes in the CSS?

Weird. I leave the height at 62 px and change the width to 212 pixels and the logo is now in the middle again. The logo is resized though, should I be good?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.