I have worked with Bootstrap many times, and have only seen this issue when my meta viewport tag is missing. However, that is loaded, and I am still experiencing issues with Bootstrap on mobile devices. Might anyone know what else could be causing this?
Issues:
button routes showing
styles not displaying properly
CSS showing in view
mobile nav missing
formatting/alignment is off
Head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Training Portal</title>
<!-- bootstrap/jquery -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- custom stylesheet -->
<link href="<?= base_url("stylesheets/cust.css"); ?>" rel="stylesheet" type="text/css" media="screen">
</head>
Scripts at end of <body>:
<!-- scripts -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="<?= base_url("assets/script.js"); ?>"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
Viewport data also added to CSS:
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
Example of issue on mobile:
What this looks like on desktop:
It appears to be a PHP error, and judging by the lack of CSS, I'm going to take a stab and say that maybe the PHP short tags (<?= and <?) are not enabled?
I see "undefined index: session-course" in the messages returned from PHP, in templates/dashboard.php. While it is only a notice, it is probably corrupting the CSS so the browser can't render it.
Related
I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">
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
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">
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?
I am using Bootstrap to display a list and I am trying to customize its list-item-component.
I have the following code in my CSS file:
.list-group-item {
border:0 !important;
padding-top:2px;
padding-bottom:2px;
}
I reference the CSS file like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="list.css" rel="stylesheet" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Restriction Lists</title>
</head>
<body>
<div id="tree"></div>
<script src="ListApplication.js"></script>
</body>
</html>
The Bootstrap code is in the following file(I am using React).
<script src="ListApplication.js"></script>
Another weird thing is that Chrome Developer Tools does not display the CSS file correctly.
Try with <meta> first:
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="list.css" rel="stylesheet" type="text/css">
and make sure jquery and bootstrap are coded succesfully in your ListApplication.js
it should work.
The problem was that I was opening the HTML file from within Webstorm. When I was changing the CSS file, the changes were not loaded into the browser upon refresh.
I've spent a lot of time working with Foundation and less time working with Bootstrap. I'm having an issue with responsiveness in Bootstrap that I don't understand because this just seems to work in Foundation. The issue is that, while the grid responsiveness works as expected, my fonts are getting scaled so tiny that it is almost illegible on mobile. Notice in my example below that I set the font size to 14px, but on mobile this is becoming very tiny. You can see this by clicking on the mobile button in the Chrome dev tools.
The html to reproduce this is very simple, here is a jsbin: http://jsbin.com/lumepumufu/1/
And here's the html:
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body style="font-size:14px">
<div class="container">
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
</div>
</div>
</body>
</html>
Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
To ensure proper rendering and touch zooming, add the viewport meta tag to your head
<meta name="viewport" content="width=device-width, initial-scale=1">
You should always start from a template, e.g. the "Basic template" (http://getbootstrap.com/getting-started/#template). This works as intended:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="font-size:14px">
<div class="container">
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
It might seem like a lot of "cruft", but everything is there for a reason.
I had this problem, and my issue ended up being the code formatter I was using. It was closing the tags with "/", which caused my program to not use the tags. Specifically the:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you are running a rails app, you can try the gem rails_layout
i was having problems with small fonts and a small navbar, my problem was setting the navbar width in css, using max-width instead of just width solved my scaling problem
use "rem" instead of px; ( pixel );
like .myclass { font-size: 1rem; }
I have a mockup here
http://dummytest.herokuapp.com/
At the moment the plain vanilla HTML shows first and then it flickers and it is rendered with CSS applied. How can I get my page to show the CSS styling as the first thing completely bypassing the unstyled text?
Your document is not well formed (wiki), which is leading to this behavior.
Generally web pages go:
<html>
<head>
<!-- meta tags go here along with title,
script links, and css style references -->
</head>
<body>
<!-- elements for rendering go here -->
</body>
</html>
You would like to correct your HTML to comply with HTML standard:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Harness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--<Le>HTML5 shim, for IE6-8 support of HTML elements</Le>--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--<Le>styles</Le>-->
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/datepicker.css" rel="stylesheet">
<link href="/stylesheets/style.css" rel="stylesheet">
<style>body {
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="/javascripts/slimScroll.min.js"></script>
<script src="/javascripts/housefix.js"></script>
<script src="/javascripts/bootstrap-transition.js"></script>
<script src="/javascripts/bootstrap-alert.js"></script>
<script src="/javascripts/bootstrap-datepicker.js"></script>
<script src="/javascripts/bootstrap-modal.js"></script>
<script src="/javascripts/bootstrap-dropdown.js"></script>
<script src="/javascripts/bootstrap-scrollspy.js"></script>
<script src="/javascripts/bootstrap-tab.js"></script>
<script src="/javascripts/bootstrap-tooltip.js"></script>
<script src="/javascripts/bootstrap-popover.js"></script>
<script src="/javascripts/bootstrap-button.js"></script>
<script src="/javascripts/bootstrap-collapse.js"></script>
<script src="/javascripts/bootstrap-carousel.js"></script>
<script src="/javascripts/bootstrap-typeahead.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<p>
Home |
Log In
</p>
<h2>Welcome! Please log in.</h2>
</body>
</html>
Put all your <head></head> code in one place and all your <body></body> code in one place as well.
Currently you have 2 sets of <head> and <body>. Take the one above (with menu) and merge it with the one below (with welcome message).
It would be best to run all your webpages through http://validator.w3.org/ to avoid future problems like this.