Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS not working in mobile browsers

Tags:

html

css

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 site and only loads the html portion. Read through other similar questions but they don't seem to have the same problem as I do. Any advice on how to fix it?

BTW, If you guys need the codes:

Here is a sample css file

EDIT: I use an android 4.2 phone, native browser

like image 237
hiu28 Avatar asked Oct 15 '25 07:10

hiu28


2 Answers

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>
like image 131
Mario Sanchez Maselli Avatar answered Oct 17 '25 11:10

Mario Sanchez Maselli


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;">
like image 32
calyxofheld Avatar answered Oct 17 '25 12:10

calyxofheld



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!