How can i force my logo to be smaller and on top left on mobile devices?

Vote count: 0

I just positioned the logo on top of my Header-Image, on Desktop it's perfect but if i change to mobile it's covering the menu Floating on the right side.

I want to Keep it to stay in the left corner, but smaller.

My php looks like this:

<a href="/"> <id="logo"><img class="img-logo" src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" width="180" alt="logo"></a>

   <img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
        <div class="infobox"><div class="inner">    
    </div>

and the Styling is currently like this:

.img-logo{
position:absolute;
top: 120px;
left: 250px;

}

.header img.headerpic  { 
    max-width:100%; 
    top: 0px;
    left: 0px;
    position: relative !important;
    z-index: -1500;
}

What additional Styling or changes do i Need to make that the logo get's a bit smaller and moves to the top left on mobiles?

asked 30 secs ago

Jonathan Alexander

Let's block ads! (Why?)

How can i force my logo to be smaller and on top left on mobile devices?