0

I'm setting breakpoints in css using '@media only screen and (max-width: 500px)'.

When I set it to change colour upon reaching the breakpoint it works:

@media only screen and (max-width: 500px) {#container{color:black;}}

the container div does go black when I resize the browser, however when I set the breakpoint to change the margin of the div the breakpoint is not triggered.

So when I set the query to:

@media only screen and (max-width: 500px) {#container{margin-left: 0px;}}

nothing changes when the screen is resized in exactly the same way as when I resized when testing for colour change.

the main css file sets #container at margin-left; 18% and when this is changed manually to 0px it does shift the document all the way to the left of the viewport

I've tried various different styles and html elements but colour changes seem to be very reliable, they work in pretty much any combination, but resizing divs or repositioning does not seem to work at all. Why might this be?

Answer:

I was putting my @media query at the head of my css file , when I moved it to the foot of the css file it now resized. It leaves the question though, why did it change the colour at the head of the file but not resize?

NiallJG
  • 1,881
  • 19
  • 22
  • 1
    There is no margin for other widths in the code given. – Popnoodles Jun 10 '14 at 22:02
  • In this case, `#container` must already have a left margin of 0 pixels, so there's nothing to change. – TylerH Jun 10 '14 at 22:10
  • Sorry, the #container div is set to 'margin-left: 18%;' when I manually change the css so that the regular #container div (not the one set in the @media query ) is set to 0px it does shift all the way to the left of the viewport – NiallJG Jun 10 '14 at 22:19

3 Answers3

2

You can change margins just as reliably as you can background colours through media queries.

See this for example:

http://jsfiddle.net/Q55MC/

#container {background: blue; margin: 50px; width: 200px; height: 200px;}

@media only screen and (max-width: 500px) {
    #container{background:black; margin: 0px;}
}

Try creating a demo so that people can have a better idea about what your trying to achieve.

Sj.
  • 1,402
  • 1
  • 12
  • 9
  • I had my @media query ahead of the main div when I put it at the foot of all my main css it now repositions the div when the breakpoint is reached – NiallJG Jun 10 '14 at 22:23
0

It looks like the 18% style is taking precedence.

Try to override it with this:

@media only screen and (max-width: 500px) {#container{margin-left: 0px !important;}}

Matt
  • 33,328
  • 25
  • 83
  • 97
0

Would the @viewport meta declaration help?

Elegantly Resize Your Page With the @viewport CSS Declaration

be aware that this post uses @-viewport when it should just be @viewport

Dave Powers
  • 2,051
  • 2
  • 30
  • 34
Nigel Joyce
  • 73
  • 5