-2

I made some simple media queries and load in website but when I refresh the page so because of media queries css website orignal css also disturbing, please suggest the exact and proper solution how I fix the media queries as per mobile widths and also including way of these queries in website so I can make a proper responsive website.

For more suggestion I share css code 

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 480px)
body {
    background-color:white;
}

#columnout {
    background:none;
    background-color:#0090d7;
    width: 300px;
    height: 200px;
    margin-top: 210px;
    position:absolute;
    z-index:100;
}

#column{

    width: auto;
    height: auto;
    text-align: right;
    margin-left: 47px;
    z-index: 1; 
    margin-top: -29px;

}
marc_s
  • 675,133
  • 158
  • 1,253
  • 1,388
FormaL
  • 359
  • 2
  • 4
  • 19

2 Answers2

2

You are missing the brackets: {}

@media only screen and (max-width : 480px) {

    body {
        background-color:white;
    }

    #columnout {
        background:none;
        background-color:#0090d7;
        width: 300px;
        height: 200px;
        margin-top: 210px;
        position:absolute;
        z-index:100;
    }

    #column{
        width: auto;
        height: auto;
        text-align: right;
        margin-left: 47px;
        z-index: 1; 
        margin-top: -29px;  
    }
}

Some reference for testing how responsive your design is: http://creatiface.com/tools/responsive-design-test

Nico
  • 781
  • 1
  • 8
  • 19
Jacob
  • 5,004
  • 18
  • 67
  • 130
-1

Add {} in your media query: 

@media only screen and (max-width : 480px){
body {
  background-color:white;
}

#columnout {
  background:none;
  background-color:#0090d7;
  width: 300px;
  height: 200px;
  margin-top: 210px;
  position:absolute;
  z-index:100;
}

#column{

  width: auto;
  height: auto;
  text-align: right;
  margin-left: 47px;
  z-index: 1; 
  margin-top: -29px;

}
}

For more details please see this link: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

user2936213
  • 1,041
  • 1
  • 8
  • 19
  • '
    ' i want to disable background image i use in css background-image:none ,even i use same as above code of column div but still image shows.     – FormaL Jan 10 '14 at 14:42
  • `` you dont want to show this image? – user2936213 Jan 13 '14 at 06:02
  • [link](http://stackoverflow.com/questions/21201276/codeigniter-email-class-registration-after-submission) please suggest – FormaL Jan 18 '14 at 07:28