html - CSS Media Query Not Loading -


I am writing a static website and testing it locally. I have written a media question to change a layout slightly, so it's great to see on smartphone, with my media query being done to follow my target text and profile photo by each other.

My problem is that when I load the HTML file on Chrome or Firefox and change the size of the window, the layout does not change and I can not decide how to fix it. Any help would be much appreciated. For my standard CSS

For my standard CSS I have this (a small snippet):

  about # -text {/ * a div that contains paragraphs and a table * / Display: inline-block; Width: 50%; } # Profile-photo {/ * about- text div * / an img after ceiling closing: 4px solid # 1abc9c; Display: Inline; float right; Margin: 8% 0% 0% 0%; Max-width: 40%; }  

And then I have a media query and related CSS:

  @ media (minimum-device-width: 320px) and (max-device -food: 480 pixels) {# -in-text {/ paragraph and a div containing a table / / display: block; Width: 50%; } # Profile-photo {/ * about- text div * / an img after ceiling closing: 4px solid # 1abc9c; Display area; float right; Margin: 8% 0% 0% 0%; Max-width: 40%; }}  

You are using minimum-device-width and maximum-device width Only the screen size of the device takes into account Use minimum-width and maximum-width and when you resize it will work in your browser. Example:

  .testDiv {color: green; } @ Media (minimum-width: 320px) and (max-width: 480px) {.testDiv {color: red; }}  


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -