I'm trying to implement the mobile view of my Django project but the media query part of my CSS seems not to be working in the django project. Given that I made a div container to display flex, with flex-direction of column when the screen size is 375px or less, the div continues displaying as row which is the display pattern given for the larger screens.
Index.html template
<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}
<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.0">
<title>Oppapp</title>
<link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
{% block content %}
<div class="container">
{% for object in object_list %}
<div class="postlist">
<div class="listicon">
<img src="{{object.image.url}}">
</div>
<div class="listtext">
<ol><a href="{{object.get_absolute_url}}">{{object.title}}</a></ol>
<ol>{{object.article | truncatewords:15| linebreaks}}</ol>
<ol>{{object.location}}</ol>
<ol><small>{{object.created}}</small></ol>
</div>
</div>
{% comment %} <hr> {% endcomment %}
{% empty %}
<p>No News Here</p>
{% endfor %}
</div>
{% endblock content %}
</body>
</html>style.css static file
.postlist{
border-radius: 5px;
background-color: rgb(255, 255, 255);
-webkit-box-shadow: 0 0 5px hsl(208, 11%, 55%);
box-shadow: 0 0 5px hsl(208, 11%, 55%);
margin-top: 20px;
padding: 20px;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.listicon{
display: flex;
flex: 16%;
}
.listicon img{
display: flex;
flex: 20%;
height: 180px;
width: 180px;
}
.listtext{
flex: 70%;
}
@media screen and (max-width:375px) {
.postlist{
border-radius: 5px;
background-color: rgb(255, 255, 255);
-webkit-box-shadow: 0 0 5px hsl(208, 11%, 55%);
box-shadow: 0 0 5px hsl(208, 11%, 55%);
margin-top: 20px;
padding: 20px;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.listicon img{
display: flex;
flex: 20%;
flex-direction: column;
}
.listtext{
display: flex;
flex: 70%;
flex-direction: column;
}
}
Settings.py
from pathlib import Path
import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'SECRET_KEY'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = 'DEBUG'
ALLOWED_HOSTS = ['*']
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django_social_share',
'oppapp'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'oppject.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'oppject.wsgi.application'
# Database
# https://docs.djangoproject.com/en/4.0/ref/settings/#databases
# DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': BASE_DIR / 'db.sqlite3',
# }
# }
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME':'dbname',
'USER':'user',
'PASSWORD':'*****',
'HOST':'127.0.0.1',
'PORT':'3306',
'OPTIONS': {
'init_command': "SET sql_mode='STRICT_TRANS_TABLES'"
}
}
}
# db_from_env = dj_database_url.config(conn_max_age=500)
# DATABASES['default'] = db_from_env
# Password validation
# https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'Africa/Lagos'
USE_I18N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / 'oppapp/static/'
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
# Media URL and ROOT added by me
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / 'media'