Django-React hybrid app not responsive on iPhone

Using Django Templates & Frontend
1

I have deployed a Django-React hybrid app to Railway, and the site isn’t responsive on my iPhone. The styling is fine on desktop browsers. I previously deployed the same app as a decoupled app (frontend on Netlify, backend on Render) and the mobile version is responsive. Does anyone have any suggestions?

Hybrid app: Movie Hub

Decoupled app: Movie Hub

Hybrid app:

moviesapi/settings.py:

DEBUG = os.environ.get('DJANGO_DEBUG', '') != 'False'
TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [
      os.path.join(BASE_DIR, 'templates'),
    ], …

STATIC_ROOT = BASE_DIR / 'staticfiles'
STATIC_URL = 'static/'
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, 'static'),
]
STORAGES = {
  "staticfiles": {
    "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
  }
}

templates/index.html:

{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>Movie Hub</title>
    <link rel="shortcut icon" href="#">
  </head>
  <body>
    <div id="root"></div>
    <script src="{% static 'index-bundle.js' %}"></script>
  </body>
</html>

Procfile:

web: python manage.py migrate && python manage.py collectstatic --no-input && gunicorn moviesapi.wsgi
2

The GitHub repo for the hybrid app: GitHub - becathey/movie-hub-django-react-redux: An application that displays top-rated movies. Django | DRF | React | Redux

3

You can use the Developer Tools → Network tab in whatever browser you use and check if some of the requests for CSS, js etc are failing. That should give you a place to start.

If that doesn’t give any insights, then is something to do with your js code.

4

Ups, didn’t notice you have issues on mobile only.

5

What exactly do you mean by responsive? Can you post a link to your app? Not the source code, the app itself.

6

Links are in the original message to both apps.

7

Gotcha.

Both links work for me on Android, one of them a tad slower (now both are fast due to caching).

Add a “loading” in MoviesList like you have in MovieDetail, most likely you are seeing a tad slower response.

8

Yes, the backend for the decoupled app on Render has to spin back up after some time of inactivity. However, I was referring to responsive as in layout. The hybrid app displays as a desktop layout on my iPhone: rows of 3 cards each. The decoupled app is mobile friendly with a card filling up the screen. I’m trying to figure out if there’s some reason why Django serving the React static files in the hybrid app is not applying the mobile-friendly layout.

9

1000011691
10000116911080×2412 228 KB

1000011690
10000116901080×2412 227 KB

They look the same on Android. Might be iOS. Don’t stress too much, considering you are following a tutorial.

That has nothing to do with Django, but all to do with apple liking to be different, out of scope for this forum.

10

Thanks for the screen shots. That’s the way the Railway version displays on my iPhone, but the Netlify version adapts to the mobile screen. Oh well.