News Mix Lite theme Logo Not responsive

Hi,

I am having an issue with using News Mix Lite theme when its scaled less than 980px (when used in a tablet).
Let me explain the problem in plain.

Instead of a default logo near the right side of the page, I am using a full 1200x 200 banner in the page header.
Here below is the code.
When its scaled, the logo comes to right end(slightly small) and the entire d the div becomes red( see the image)

https://drive.google.com/file/d/0B9Lg7nhhfLgGemM3dGlka2RWR0U/view?usp=sharing

<div id="logo-image">                                                               
<a href="https://localhost:8080/mussd/">                                   
<img src="https://localhost:8080/mussd/wp-content/uploads/2016/07/New-logo.jpg" alt="MESUREMENT DEPT Logo" height="70" width="1100">                               
</a>                                                         
</div>                        
<div class="top-banner">                                                        
</div>
<!--top-banner-->
   

Here below is the css fragment,

/*----- Logo -----*/
#logo-image {
    float:left;
    margin:25px;
    text-align: center;
}
#logo-image h1 a {
    color: #fff;
}
#logo-image .tagline {
    color: #fff;
}
.top-banner {
    text-align: right;
    margin:30px 25px 0 0 ;
}

Can Anyone help to resolve this?

• This topic was modified 8 years, 4 months ago by kulasiriwardana.