Question

I have a site which I want to make mobile. I just started with mobile.
How can I improve this site ?

Is there a way I can use css to position an element when a condition is met like for instance when the width is smaller then a certain limit. I center an elemtn?

Here is the link to the jsfiddle

http://jsfiddle.net/SNFCd/

#bk-parent{width:90%; background-color:black; margin:0 auto; font-family: sans-serif; color:white}
#bk-header{width:inherit}
.logo {float:left;}
.addr{float:right}
#bk-footer li{float:left}

Answer 1

What you want are Media Queries. That link is for the W3C recommendations.

Basically, the syntax is as follows:

@media only screen and (min/max-width: ){ 
  //do something

}

These are called ‘break points’. Which means, at the point where the browser reaches the min/max width you provide, you can overrule any other css. So, you can indeed center the element when that condition is met.

@media screen and (min/max-width: ){ 

  div {
      margin: 0 auto;
   }


}

Smashing Magazine also provides a good (IMO) tutorial on them.