How to make Responsive image - html

Question

I'm working on my Django website and I get some unclear points according to my responsive website design.
My environment :
Django 2.0.1
HTML 5
CSS
Bootstrap 3.3.7
My issue :
I developped my Django website on my screen with this resolution : 1920*1080. Now I would like to adapt each HTML template to users screens.
I don't really have knowledges about responsive design because I'm mainly Back-End developper.
When I display my website on different screen size, CSS is not good at all. I assume pictures make my display very ugly because it's not totally responsive.
My code :
HTML Script :
<!-- This script lets to define homepage template for "Accueil" -->
{% extends 'Base_Accueil.html' %}
{% load staticfiles %}
{% load static %}
{% block content %}
<div id="content">
<br></br>
<div id="content-1">
<div id="presentation-title">
<p>Petit mot de l'Astrophotographe & Développeur du site</p>
</div>
<div id="presentation-text">
<p> Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />
<p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />
<p align="center">Je vous souhaite une bonne visite !</p>
</div>
</div>
<br></br>
<div class="row">
</div>
<div id="content-2">
<div id="presentation-image-récente">
<p>Dernière image publiée</p>
</div>
<div id="presentation-image">
<li class="image">
<img src='{{photo.Image_upload.url}}'/>
<p></p>
<figcaption>
<div>
<center>
<p></p>
<p><b>{{photo.Nom}} ({{photo.Designation}})</b></p>
</center>
</div>
</figcaption>
</li>
</div>
</div>
<div class="row">
</div>
<br></br>
</div>
<p></p>
{% endblock content %}
CSS script :
#media (min-width: 1900px) {
body {
background-color: #4D4D4D;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#banner {
width:100vw;
}
.navbar-collapse {
text-align:center;
background-color: #1B1B1B;
}
.navbar-nav {
background-color: #1B1B1B;
text-align:center;
display:inline-block;
float:none;
}
ul.nav.navbar-nav > li > a {
color : #00BFFF; /* Orange color*/
padding-top:10px !important;
padding-bottom:0 !important;
height: 35px;
}
.navbar {min-height:35px !important; background-color: #1B1B1B;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
background-color: transparent;
}
.dropdown-menu, .dropdown-menu > li > a {
background-color: #1B1B1B;
color: #00BFFF;
}
.dropdown-menu > li > a:hover {
background-color: transparent;
color : white;
}
.dropdown-menu > li.divider {
background: #00BFFF;
}
#content{
border-radius: 4px;
width: 70%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 16px;
}
#content-1 {
border-radius: 4px;
width: 55%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#content-2 {
border-radius: 4px;
width: 55%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#content-messages {
border-radius: 4px;
width: 55%;
margin-left: 14%;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#footer{
border-radius: 4px;
width: 70%;
margin: 0 auto;
background-color: #1B1B1B;;
color : white;
margin-bottom: 1%;
padding-bottom: 1%;
-webkit-box-shadow: black 0px 0px 12px;
box-shadow: black 0px 0px 12px;
}
.footer-text, .footer-text-list {
color : #C9C9C3;
font-size: 12px;
text-align: justify;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
ul {
list-style-type: none;
}
p.footer-title {
margin-left:5%;
}
.footer-title {
margin-top: 14%;
color : white;
font-size: 26px;
font-family: 'Noto Serif', Georgia, Times, serif;
}
.col-lg-3 {
margin-left: 6%;
}
#presentation-author, #presentation-title, #presentation-image-récente, #galerie-image{
border-radius: 4px;
margin: 0 auto;
background-color: #00BFFF;
color : white;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
#presentation-author > p, #presentation-title > p, #presentation-image-récente > p, #galerie-image > p{
margin-left:4%;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
#presentation-description, #presentation-text {
margin-left: 2%;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img,
#presentation-image > img {
width: 100%;
margin: auto;
}
figcaption > div > p {
color : #00BFFF;
}
figure.effect-new:hover figcaption::before,figure.effect-new:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.image img {
max-width: 100%;
height: auto;
}
}
Examples from my website :
EDIT :
I removed media (min-width:1900px) and I modified .image img like this :
.image img {
max-width: 100%;
height: auto;
width: auto\9;
}
It seems to be responsive now, but is it the good solution ? Then, How I can do that with text parts ?

Answer 1

You only have one media query line in your code.
The result is that it will not perform any changes.
You need to have minimum 2 media queries, as described below:
#media only screen and (max-width: 1899px) {
body {
background-color: red;
}
}
#media only screen and (min-width: 1900px) {
body {
background-color: blue;
}
}
Apart from above responsiveness, If you want to control the format and position of your text and image, I suggest you implement CSS grid which is a grid system embedded in CSS.

Answer 2

I suggest reading a bootstrap tutorial - for the latest bootstrap (4); I like w3schools and here for images (with example here).
Bootstrap works on a grid system, to get the bare minimum of a responsive image (with bootstrap 3 syntax) add the class="container" parent div and class="img-responsive" to the img tag.
see below, I removed the image tag from your css and took out the django tags:
<!-- This script lets to define homepage template for "Accueil" -->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container" class="container">
<br></br>
<div id="content-1">
<div id="presentation-title">
<p>Petit mot de l'Astrophotographe & Développeur du site</p>
</div>
<div id="presentation-text">
<p> Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />
<p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />
<p align="center">Je vous souhaite une bonne visite !</p>
</div>
</div>
<br></br>
<div class="row">
</div>
<div id="content-2">
<div id="presentation-image-récente">
<p>Dernière image publiée</p>
</div>
<div id="presentation-image">
<li class="image">
<img src='download.jpg' class="img-responsive" width="1900px" />
<p></p>
<figcaption>
<div>
<center>
<p></p>
<p><b>some (text)</b></p>
</center>
</div>
</figcaption>
</li>
</div>
</div>
<div class="row">
</div>
<br></br>
</div>
</body>
</html>
You'll want to play with row and column divs/tags to get your website singing nicely on all devices. Tutorials are great!