Search code examples
cssheaderscreenmediaalignment

Website optimization to media screen width issue (@media css)

I have a webpage where I put some @media css property because I wanted to make it more responsive. I have a header with an image. It looks fine to normal pc screens and even if i put the minimum width on chrome. But it doesn't look fine in my cellphone (nexus 4). The image is not aligned to the centre of the screen.

Here is the page : PAGE.

In my cellphone it looks like this : IMAGE

I tried the following codes but nothing worked :

HTML :

<header>
   <div class="container_12">
      <div class="grid_12">
         <h1>
              <img src="images/logo.png">  
        </h1>
        <div class="clear">
        </div>
      </div>
   </div>
 </header>

CSS :

 @media only screen and (max-width: 479px) 
 {
    body 
    {
       min-width:300px;
    }

    header h1 
    {
       margin: 20px 0px 0px;
       float: none;    
    }
 }

I have to say that I believe it is not a class "container_12" , class "grid_12" issue because (apart from the h1 with the image) they include the navigation menu as well and this one is right at the centre.

Solution

  • I finally tried this one and worked. I am open to see more options (answers).

    header h1  img 
{
    width: 100%;
}