Skip to content Skip to sidebar Skip to footer

CSS Not Working In Mobile Browsers

http://mpkosis28.com/28cup The site looks perfect when viewed from a laptop or a desktop. But when I tried to access it through my phone, it doesn't recognize the css file from the

Solution 1:

You should use the following structure

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pruebas</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <link rel="stylesheet" href="styleslocation/style.css">

</head>
<body>

    <!--Content here-->


</body>
</html>

Solution 2:

You need to make sure that you're telling the browser to set the viewport to the device width. Just define the meta content in your document head as such:

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

Solution 3:

I think you are hitting this issue:

http://css-tricks.com/css-tricks-chronicle-vol-iv/

Some mobile browsers need this format for imports:

@import url("css/style.css");


Solution 4:

If you have not solved this problem I was experiencing the same issue and the problem is the @media query isnt closed properly so it applies to all the styles below it and will only show on the screen resolution that isn't closed so you gotta close the tag properly, just do a cross check.


Post a Comment for "CSS Not Working In Mobile Browsers"