html - Media query not working in smartphone browser apps -


i'm working on one-page-project uses fullpage.js create scrollable, viewport-filling secions. it's pretty straight-forward, on each slide there 1 picture , text. on devices bigger viewports, want picture float left , text appear @ it's right side. smaller viewports, i've added media query makes picture fill viewport width (width:96vw) , removed float property (float:none; clear:both;). when test in browser on pc reducing size of browser window, works fine, if window's width reaches 800px (the condition in media query (max-width:800px)), text jumps below picture , picture enlarges width of browser window. jsfiddle created works intended well: http://jsfiddle.net/ginsan/ehco10dh/

however, i've uploaded project website , opened on android phone, , neither firefox nor chrome app seem recognize media query. applies float instead, looks terrible in portrait orientation ... i've tried adding more style-rules in media query, none of seem recognized mobile browsers.

i've stared @ media query half hour, can't find mistake. can you? or related fullpage.js library? or else might problem? according caniuse.com, media queries supported both android apps.

i post link check out problem yourself, i'm not sure if i'm allowed to. i?


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -