Media Rules Not Getting Applied to Mobile Browser

Posted In HTML & CSS
  • johny-why 1 week ago
    If i shrink a desktop browser width to less than 600px, then my media rule is getting applied.
    
    But chrome/android browser is only getting the default style, not the mobile style.
    
    Any ideas?
    
    live:
    
    https://bayviewboom.org/prototest.html
    
    -thx

    If i shrink a desktop browser width to less than 600px, then my media rule is getting applied.

    But chrome/android browser is only getting the default style, not the mobile style.

    Any ideas?

    live:

    https://bayviewboom.org/prototest.html

    -thx

  • robert-bremsat 1 week ago
    Hello johny-why, 
    you should add to your website in the head of your page than test again ;)
    
    ```<meta content="width=device-width, initial-scale=1" name="viewport" />```

    Hello johny-why, you should add to your website in the head of your page than test again ;)

    <meta content="width=device-width, initial-scale=1" name="viewport" />

  • hae-kam 1 week ago
    Yes above command is essential..It should solve your issue..Stay blessed [mybkexperience](https://www.mybkexperience.xyz/)
    

    Yes above command is essential..It should solve your issue..Stay blessed mybkexperience

  • jignesh-panchal 6 days ago
    Shrink a desktop browser width is not a actual method to check the responsive design. If you shrink the desktop browser width, so it'll detect only the browser screen width not the device width. That's why your @media rules applied very well. But when we run this code in mobile device, the @media rules will not applied. Why ?
    
    Because your HTML is not detecting the device width. So we need to give the instructions to the browser for device width. &lt;meta&gt; viewport element helps to give intructions to the browser for analysis the dimenstion of the device. The following meta tag will helps to detect the device.
    
    <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;</code>
    
    Add this meta tag in the head tag of HTML code. I, hope your problem will solve. It is mandatory for you to learn [How To Test Responsive Design of Website. Click here](http://www.codingtuting.com/2019/03/test-responsive-design-of-website24.html). Thanks for the query. Good Luck

    Shrink a desktop browser width is not a actual method to check the responsive design. If you shrink the desktop browser width, so it'll detect only the browser screen width not the device width. That's why your @media rules applied very well. But when we run this code in mobile device, the @media rules will not applied. Why ?

    Because your HTML is not detecting the device width. So we need to give the instructions to the browser for device width. <meta> viewport element helps to give intructions to the browser for analysis the dimenstion of the device. The following meta tag will helps to detect the device.

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    Add this meta tag in the head tag of HTML code. I, hope your problem will solve. It is mandatory for you to learn How To Test Responsive Design of Website. Click here. Thanks for the query. Good Luck

  • harriet-wallace 5 days ago
    Yeah, I experienced a similar problem in the past, but thankfully, I was able to find a solution and [Android apk download](https://androideapk.com/) happened by itself. If you want to know the solution, I can tell you in private message.
    

    Yeah, I experienced a similar problem in the past, but thankfully, I was able to find a solution and Android apk download happened by itself. If you want to know the solution, I can tell you in private message.

Please login or signup to leave a response.

Login

or Sign Up

Sign Up

or Login
×
Want to create your own SAAS?

I can teach you to create your own Software as a Service. Click here to learn more!

Visit SAAS Adventure!