CODEWITHSUNDEEP
mobilereactjsdesktop-application
Sean Magyar
Sean Magyar

Reputation: 2380

reactjs app working properly on desktop but not visible on mobile

I'm new to react and created a small app. Everything works fine on desktop, but the react part of the app doesn't show up on mobile. Can sby tell me what I should do?

http://dry-wildwood-76655.herokuapp.com/

package.json

{
  "name": "udacitytransportationapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "prod": "NODE_ENV=production node server.js",
    "postinstall": "webpack -p"
  },
    "author": "",
    "license": "ISC",
  "dependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-1": "^6.5.0",
    "express": "^4.14.0",
    "html-webpack-plugin": "^2.22.0",
    "jquery": "^3.1.0",
    "lodash": "^4.13.1",
    "moment": "^2.14.1",
    "offline-plugin": "^3.4.2",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-router": "^2.6.0",
    "webpack": "^1.13.1"
  },
  "devDependencies": {
    "mocha": "^2.5.3",
    "webpack-dev-server": "^1.14.1"
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Transportation App</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body>
    <div class="header">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <div class="navbar-brand">TransportationApp</div>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="http://www.bart.gov/">With this app you can search through the BART station schedules</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

style/style.css

.bart-image {
  width: 300px;
  height: 300px;
}

.table-row {
  padding-top:30px;
}

Upvotes: 0

Views: 3361

Answers (1)

erichardson30
erichardson30

Reputation: 5044

Your problem is with using fetch. If you look at the documentation https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API you can see it is not supported in all browsers. This is why it is showing up in desktop chrome but not safari and why it doesn't work on mobile.

Upvotes: 4

Related Questions