Bootstrap Mobile Not Working
Asked Answered
I

2

7

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:

enter image description here

What this looks like on desktop:

enter image description here

Interphone answered 24/4, 2015 at 14:50 Comment(6)
Your mobile screenshot looks like a PHP error dump. Have you tried to validate the resulting HTML code with online HTML5 validator?Tufthunter
have you try to put script.js after bootstrap.min.js ? And i try to use new release 3.3.4Battue
As Mikko Ohtamaa said, it looks like to be a PHP error in dashboard.php file on lines 98 and 102. Can you add the content of this file in the question?Philia
Hello, what device or emulator where you using when you encountered this error?Jiminez
@LaurenF Did you using latest Bootstrap Framework. Most of the time old framework is not working on responsive mobile design.Poe
Thanks all. PHP error was not what was causing this. Also changing the order of scripts and the version of Bootstrap unfortunately did not help.Interphone
T
1

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?

Tuyettv answered 3/5, 2015 at 0:33 Comment(1)
Yeah, I was aware of the PHP error. I was confused as to why it was showing in mobile and not on desktop. Clearing it did not fix the bootstrap error, though. And short tags are enabled throughout the app - that hasn't given me any issues.Interphone
H
0

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.

Hatteras answered 4/5, 2015 at 12:30 Comment(3)
Thanks, was aware of the PHP error. I was confused as to why it was showing in mobile and not on desktop. Clearing it did not fix the bootstrap error, though.Interphone
Have you tried validating the code at validator.w3.org and jigsaw.w3.org/css-validator?Hatteras
Yes, and it's all valid.Interphone

© 2022 - 2024 — McMap. All rights reserved.