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" />
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.
Related
It's a weather reporting web-page. Just to see what I can do. There are three iframes,
The first includes a listing of some of the parameters in an JSON file from an API. I works just the way I expected.
The second is a chart of data - a different API call from the first one. No problems there.
The third will be forecast data, but the PHP code in the file is ignored! Every time!
This is the code (I've shortened it by eliminating the formatting and printing):
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style/weather.css" />
<title>The Weather Report</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="./css/Florida.css" />
</head>
<body>
<?php
print "ready";
$forecast = get_web_page("http://api.weatherstack.com/current?access_key=1a134310341ff3b6fadb73bd1967baca&query=34232");
print $forecast;
$arrWeather = json_decode($forecast, true);
?>
</body>
</html>
All the HTML shows in wheen I view the age source"
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style/weather.css" />
<title>The Weather Report</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="./css/Florida.css" />
</head>
<body>
ready
That's it! The API request works perfectly when I plug it directly into the browser.
I have added an availability calendar to my website which I found online, the header tags are below:
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/dateTimePicker.css">
<script type="text/javascript" src="scripts/components/jquery.min.js"></script>
<script type="text/javascript" src="scripts/dateTimePicker.min.js"></script>
When I add them to my current website page, it changes the template and ruins the look by either adding blank white space at the top of the page or affecting the nav bar whenever I add the script? Any ideas how I can have the script without it affecting my template?
Here is my template html with the script added...
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="assets/style.css">
<title>Dave's Caravan Letting</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="assets/dateTimePicker.css">
<script type="text/javascript" src="scripts/components/jquery.min.js"></script>
<script type="text/javascript" src="scripts/dateTimePicker.min.js"></script>
</head>
By adding random code to existing code can cause code conflict, first understood the existing css code and than add the additional css code.
If you want to debug then open the site in browser's developer tool, check out the portion's css using inspect element and correct or rectify the css code.
Use the following link to learn how to use developer tool
https://developer.chrome.com/devtools
LocalHost shows blank page. I changed port to 80 for Apache and when I press open page, it goes to localhost/mamp just fine. When I delete /mamp, all I get is a blank page. I've tried multiple things like shutting down mamp, starting it up, restarting my machine. I've checked my folder set-up and it's fine.
I tested it by creating a new file page index.html and it opens just fine.
I have no clue why it's not opening my index.php file. Here's my block of php code from header.php that I have.
<html>
<head>
<title><?php echo $pageTitle; ?></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
</head>
And here's my index.php
<?php
$pageTitle = "A store of unique t-shirts";
include('inc/header.php');
?>
Any help would be appreciated.
Anything between <head> and </head> shouldn't show up on the page, so maybe try adding some content that would be printed on the page. For example, you could change header.php to this just to see if anything shows up:
<html>
<head>
<title><?php echo $pageTitle; ?></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<p>Hello, this is content.</p>
</body>
</html>
I have a small problem.
On some of my pages I cannot make favicon to be shown.
On some pages everything is fine, and favicon is shown properly, however on other sites I cannot make the favicon to appear. I tried putting the ico file in the main directory, but without any results.
This file1.php is working fine:
<? include("core/config.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" />
<link href="include/style.css" rel="stylesheet" type="text/css">
<title>Title</title>
<link rel="shortcut icon" type="image/x-icon" href="img/flavico.fw.ico">
<script type="text/javascript" src="include/script.js"></script>
</head>
However on this one favicon is not showing:
<?php include("core/config.php");
include("include/resolution.php");
function new_function($nazwa){
global $wys;
global $db;
$wys->some_function($ub,$na,$ub_pod);
}
?>
<!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" />
<title>title</title>
<link rel="shortcut icon" type="image/x-icon" href="img/flavico.fw.ico">
<link href="include/style.css" rel="stylesheet" type="text/css">
</head>
I assume that this problem is caused by php functions, right?
Please show urls for both pages.
Guess your problem in relative urls. Assume that first url was http://mysite.org/file1.php and second was http://mysite.org/subsecrion/file2.php
then you should either use absolute path for favicon:
<link rel="shortcut icon" type="image/x-icon" href="/img/flavico.fw.ico">
or add tag:
<base href="http://mysite.org/">
I'm programming a website in PHP 5 and for convenience I've elected to use includes for the header and footer on each page.
My html and head setup looks like this atm, and had been unchanged since I started
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html lang='en'>
<head>
<meta charset='utf-8'>
<!--[if IE]><![endif]-->
<title>TITLE</title>
<meta name='description' content=''>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='css/default.css'>
<link rel='stylesheet' href='css/bbeditor.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/bbeditor.js" type="text/javascript"></script>
</head>
As you can see I use some jquery, a nice simple bbeditor for user input and the google font api. What started happening was that I could only load the last mentioned javascript file for some reason, in this case, it would be the bbeditor. not only that, the font api just wont load at all.
I should mention that the CSS files load perfectly fine however.
Does anyone know what's going on?
Try using firebug's "Net" tab, it will show you all the requests and responses. Firstly check the Status column and, if something's wrong, the response.
Try closing your one-line tags:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html lang='en'>
<head>
<meta charset='utf-8' />
<!--[if IE]><![endif]-->
<title>TITLE</title>
<meta name='description' content='' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css' />
<link rel='stylesheet' href='css/default.css' />
<link rel='stylesheet' href='css/bbeditor.css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/bbeditor.js" type="text/javascript"></script>
</head>
Note the /> at the end of link and meta tags.