Search code examples
phpcssmedia-queriessmartphone

Im not getting any css on smartphone

I'm doing a project where I am using Media queries for responsive design.

I have 4 media queries in total.

On computer, when I resize the browser I pass for all my media queries, its working perfectly.

On smartphone I dont understand why, I'm not getting any css.

Even if I do in my stylesheet outside media queries *{display: none;}, on my smartphone the content appears.

Do you have any idea why this can be happening?

I have an index.php file where I do my css and js imports, and I have a function HomePage() that calls my homepage.

?php
ob_start(); session_start();
require_once('code/db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="device-width, initial-scale=1, maximum-scale=1" />

<title>Untitled Document</title>
<link rel="icon" type="image/png" href="<?php setHome();?>/template/images/icon.png" />
<link href="<?php setHome();?>/template/css/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"  href="<?php setHome();?>/template/fonts/fonts.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="<?php setHome();?>/template/acc/css/jquery-ui-style.css" type="text/css" />

<script type="text/javascript" src="<?php setHome();?>/template/js/jquery.js"></script>
<script type="text/javascript" src="<?php setHome();?>/template/js/scripts.js"></script>

<?php
HomePage();
?>

My setHome function:

function setHome(){
    echo 'http://localhost/website';    
}

If I import my css like this it works:

<link href="template/css/styles.css" rel="stylesheet" type="text/css" />

But Like this dont works: (But works on computer)

<link href="http://localhost/website/template/css/styles.css" rel="stylesheet" type="text/css" />

Like this also dont works: (But works on computer)

 <link href="<?php setHome();?>/template/css/styles.css" rel="stylesheet" type="text/css" />
Solution

  • If that's your actual code, the answer is pretty straightforward

    http://localhost

    Will work on your computer, but when you access it from your phone, it's going to try to connect to the localhost i.e. the phone instead of the computer - you need to put your actual hostname or IP address in there instead.