Problem with mobile view & tablet view responsive media queries

Question

I created my website on Dreamweaver and I put it on line. The website address is https://www.economiseur-d-eau.fr.

On Dreamweaver and on line (from my PC through the developer tools), my website is responsive.

Here some screenshots:

enter image description here

enter image description here

enter image description here

But, from my mobile on line, the mobile view and tablet view are not responsive and don't display correctly.

My HTML ans CSS codes seem to be correct.

Here my website's code source.

And below my website's CSS code:

@charset "utf-8";
/*Global / Desktop View*/
header {
  background-color: rgba(0, 0, 0, 0.70);
  padding-left: auto;
  padding-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
nav {
  float: right;
  margin-right: 10px;
}
.mobile-view {
  display: none;
}
.desktop-view ul li {
  list-style-type: none;
  display: inline-block;
}
.desktop-view {
  margin-top: -5px;
}
body {
  font-family: josefin-slab;
  font-style: normal;
  font-weight: 100;
  color: #EAEAEA;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
.desktop-view ul li a {
  color: rgba(255, 255, 255, 1.00);
  text-decoration: none;
  padding-right: 10px;
}
.hero-image {
  height: 450px;
  background-image: url(images/economiseur-d-eau-hero-arriere-plan.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0%;
  padding-top: 20px;
}
main {
  min-height: 800px;
}
footer {
  height: 100px;
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
}
.social-icons {
  float: left;
  margin-top: 10px;
}
.copyright {
  float: right;
  color: #000000;
  margin-top: 20px;
}
.facebook-icon {
  margin-right: 20px;
}
.twitter-icon {
  margin-right: 20px;
}
.email-icon {
  margin-right: 0px;
}
.hero-content {
  margin-top: 50px;
  margin-left: 100px;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.guide-achat {
  color: #000000;
  font-size: 32px;
}
p {
  font-size: 16px;
  color: #000000;
  margin-bottom: 30px;
}
h1 {
  color: #000000;
  font-family: josefin-slab;
  font-style: normal;
  font-weight: 700;
}
hr {
  border-style: solid;
  border-color: #000000;
  margin-top: -10px;
  margin-bottom: 30px;
}
.btn-black {
  background-color: #000000;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #FFFFFF;
}
.image-grid {
  margin-top: 150px;
  margin-bottom: 40px;
}
.col {
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2%;
}
.col-lg {
  width: 31.3%;
}
.responsive-image {
  width: 100%;
  height: auto;
  display: block;
}
.image-grid:after {
  clear: both;
  display: block;
  content: "";
}
.text-white-description {
  color: #FFFFFF;
  font-size: 30px;
}
.text-red {
  color: #FF0004;
}
.logo {
  margin-left: 10px;
}
/*Tablet View*/
@media (min-width: 401px) and (max-width: 768px) {
  .mobile-view {
    display: block;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
  .desktop-view {
    display: none;
    text-align: right;
    margin-top: 30px;
  }
  .expand {
    display: block;
  }
  .desktop-view ul li {
    display: block;
    background-color: #000000;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  h1 {
    font-size: 24px;
  }
  .hero-content {
    margin-left: 25px;
    margin-right: 25px;
  }
  .col-md {
    width: 48%;
    margin-top: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
}
/*Mobile View*/
@media (max-width: 400px) {
  .mobile-view {
    display: block;
    margin-top: 7px;
    float: right;
    margin-right: 10px;
  }
  .desktop-view {
    display: none;
    text-align: right;
    margin-top: 20px;
  }
  .expand {
    display: block;
  }
  .desktop-view ul li {
    display: block;
    background-color: #000000;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .hero-image {
    height: 400px;
  }
  h1 {
    font-size: 20px;
    margin-top: -20px;
  }
  .hero-content {
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
  }
  .hero-content hr {
    display: none;
  }
  .hero-content p {
    font-size: 14px;
  }
  .col-xs {
    width: 100%;
    margin-top: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
  .logo {
    width: 65%;
    height: 65%;
  }
}

Could you please have a look on my website and help me fix this issue?

Answer 1

I looked at the code of your website. Seems like the issue is viewport meta tag is missing. Please add the below line in the <head> section of your html (every page)

<meta name="viewport" content="width=device-width, initial-scale=1.0">