媒体查询CSS麻烦

Question

I have 2 divs, with IDs re1 and re2 , both of their widths are set to 100% as their max-widths (800px and 400px) mean that both divs will stay on the same line in my container which has a max width of 1200px. This also means that on a mobile phone when the two divs become stacked each div will fill the width of the screen. The problem arises on mid sized screens ie. ipad, the size of the screen means that both of the divs go on a separate line, but due to their max-widths they have different sized widths which looks awful. So I tried to change their widths using media queries so they would stay on the same line for ipad but it doesn't seem to be working.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { 
#re1 { width: 66.67%; }
#re2 { width: 33.33%; }
}

I have tried using the above values as default without the media queries and it has the desired effect, so it is something to do with the query itself. How do I get the divs' widths to change to 66/33% only when viewed on screens of the above resolutions?

Answer 1

try this:

@media all and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)  { 
#re1 { width: 66.67%; }
#re2 { width: 33.33%; }

}