0

I want to host a website using GitHub Pages. I was able to upload it, and it works perfectly on a computer. However, when I open it on a phone the Bootstrap and/or media queries is not working, because the website looks like its shrink to fit, instead of taking the responsive layout I coded.

Right now my files look like:

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- JS (end of body) -->
<script src="js/custom.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bxslider.js"></script>

responsive.css

@media only screen and (max-width: 768px){
.header-picture{
    display: none;
}

The problem is that on my phone the website looks like this: non-responsive

When it should look like this (according to responsinator): responsive

I followed Bootstrap / CSS not working on Github Pages and tried to fix it by adding the file location on github. However, I got the same result

index.html

<!-- Meta tag for responsive websites -->
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/style.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/responsive.css">
<!-- JS-->
<script src="https://EmiliaPaz.github.io/js/custom.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.js"></script>
<script src="https://EmiliaPaz.github.io/js/bootstrap.min.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.bxslider.js"></script>

What I find really curious is that when I put my website URL (https://emiliapaz.github.io/) on responsinator.com , it shows that it should work on smaller screens but it doesnt!

Thanks for the help, I am really stuck

EPaz
  • 85
  • 1
  • 2
  • 13

2 Answers2

1

There's a typo with your <meta> tags (width-device-width).

Change from:

<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">

to

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
GTHell
  • 603
  • 1
  • 8
  • 20
0

Meta viewport needs to fit the device width on safari IOS. 

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

For More Info Reference Stack Question below: What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

Steven Anthony
  • 91
  • 4