0

it's been some time since I did some coding so I'm basically a newbie in updated PHP (so please bear with me). I've created a basic draft related to new web I'm working on. I decided to include header.php file (as it's supposed be used on many other pages on that web and I don't want to code header info manually for each page).

index.php file is located in main folder, css, js and images each in a separate folder: web-folders-structure .

All seems to be working fine, but when I simulate either iPad or iPhone display - menu is not resized for those type of screens (even though css styles contain detailed specs for each case).

What it should look like: expected result

How it looks when header.php is included: distorted navigation

index1.php start of the code:

<?php include ("./inc/header.php"); ?>
<div id="wrap">
</div>
<!-- navigation -->

content of header.php file (located in "inc" folder):

<?php
//db start
$db = mysqli_connect("localhost", "root", "", "pokus",)
or die('Error connecting to MySQL server.');
//Set DB connection charset to utf-8
$db->set_charset("utf8");
?>


<head>
<title> EGYPTICA - svet starovekeho Egypta 2019 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="sk">   
<meta name="description"  content="historia starovekeho Egypta"> 
<meta name="keywords" content="Egypt, staroveky Egypt, stary Egypt, Egyptica, egyptica, egyptologia, knihy, starovek, mumia, faraon, pyramidy">  
<meta name="copyright" content="Copyright  (c) 2019 Jana Rusnakova"> 
<meta name="author" content="Jana Rusnakova">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="./css/menumaker.css" type="text/css" />
<link rel="stylesheet" href="./css/main-styles.css" type="text/css" />
</head>
<body>

I tried to remove include and insert meta tags directly into index1.php and that works fine on all type of displays. However once I use include (of header) - when I check small screens (tablet, mobile phone) it doesn't work properly.

Any advise as to what could cause this?

Thx

JanaR
  • 13
  • 3
  • 1
    Have you tried adding viewport meta tag? `` – Ramesh Navi Feb 09 '19 at 19:18
  • @RameshNavi Yup, that was it. I had it there when all codes were located in one file.. I guess I forgot to move this key line into header file. Thank you very much ;) – JanaR Feb 09 '19 at 19:37
  • Possible duplicate of [Responsive web design is working on desktop but not on mobile device](https://stackoverflow.com/questions/14304494/responsive-web-design-is-working-on-desktop-but-not-on-mobile-device) – disinfor Feb 09 '19 at 19:39

2 Answers2

0

Try adding viewport meta tag.

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

Hope it helps.

Ramesh Navi
  • 773
  • 1
  • 11
  • 24
0

I don't think there is a problem with the inclusion of the header.php file. I would guess that the problem is with the media queries in your CSS file since the hamburger menu is not displayed and the menu items are not hidden...

Igor Stojanovski
  • 1