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

Lauren F
  • 1,282
  • 4
  • 18
  • 29
  • 2
    Your mobile screenshot looks like a PHP error dump. Have you tried to validate the resulting HTML code with online HTML5 validator? – Mikko Ohtamaa Apr 27 '15 at 14:10
  • have you try to put script.js after bootstrap.min.js ? And i try to use new release 3.3.4 – MaGiO Apr 28 '15 at 09:41
  • 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? – Seb33300 Apr 28 '15 at 15:45
  • Hello, what device or emulator where you using when you encountered this error? – Daniel Burkhart Apr 29 '15 at 20:25
  • @LaurenF Did you using latest Bootstrap Framework. Most of the time old framework is not working on responsive mobile design. – Codelord Apr 30 '15 at 12:53
  • 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. – Lauren F May 04 '15 at 15:59

2 Answers2

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?

Te Riu Warren
  • 229
  • 2
  • 5
  • 13
  • 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. – Lauren F May 04 '15 at 15:54
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.

user2182349
  • 9,569
  • 3
  • 29
  • 41