media-queries problem buildind portfolio-website-CodePudding

hi guys i'm a bit newbie in web dev and i'm trying to build my portfolio website as training project, i structured it in desktop mode and when i begun using media-queries for responsiveness i encountered some problems, in a few words i have the mobile breakpoint at max-width 860px that works only if i resize the window of the browser manually and not if i use chrome's developer-tools to view it in mobile mode, i'll leave here the code and the link to the website if you want to view it on mobile

http://mandowebdev.ddns.net/portfolio/

@import url("https://fonts.googleapis.com/css2?family=Luckiest Guy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Knewave&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap");

:root {
  --background: #3e3e3e;
  --primary: #ffed00;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

html {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  background-color: var(--background);
  color: var(--primary);
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  margin: auto;
}

nav {
  width: 75%;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  height: auto;
}

.nav-logo {
  font-family: "Luckiest Guy", cursive;
  font-size: 3rem;
  margin-right: 4.25rem;
  margin-top: 1rem;
}

.nav-ul {
  display: flex;
  list-style-type: none;
}

.nav-li {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  margin-right: 3.125rem;
}

.nav-links {
  text-decoration: none;
  color: var(--primary);
}

hr {
  border: 2px solid #707070;
}

.landing {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(img/grid.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  margin-bottom: 14.7rem;
  padding: 3rem;
}

.landing-logo {
  font-family: "Luckiest Guy", cursive;
  font-size: 7.25rem;
}

.landing-logo-subtitle {
  font-family: "Knewave", cursive;
  font-size: 4.19rem;
}

.stack {
  margin: auto;
  margin-top: 8rem;
  display: flex;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 12.25rem;
}

.stack-h1 {
  font-family: "Luckiest Guy", cursive;
  font-size: 2.5rem;
  margin-bottom: 8rem;
  margin-left: 7.5rem;
}

.stack article {
  align-items: center;
}

.cloud {
  border: 5px solid var(--primary);
  border-radius: 4rem;
  display: flex;
  justify-content: space-around;
  margin-left: 4rem;
}

.stack-icons {
  margin: 5rem 1.5rem 5rem 1.5rem;
  min-width: 2rem;
}

.projects {
  margin-top: 25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.projects-h1 {
  font-family: "Luckiest Guy", cursive;
  font-size: 3rem;
}

.project {
  padding-bottom: 10rem;
  padding-top: 10rem;
  display: grid;
  grid-column-gap: 8rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-bottom: 2px solid var(--primary);
  font-family: "Poppins", sans-serif;
  line-height: 2rem;
}

#plant {
  direction: rtl;
}

#plant p {
  direction: ltr;
}

@media  (max-width: 860px){
  .project{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

@media screen and (max-width: 1230px) {
  .stack {
    flex-direction: column;
  }

  .cloud {
    margin-bottom: 15rem;
  }
}


@media screen and (max-width: 1600px) {
  html {
    font-size: 14px;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Portfolio</title>
  </head>
  <body>
    <nav >
      <p >Mando.</p>
      <ul >
        <li ><a href="#" >HOME</a></li>
        <li ><a href="#" >DEV-STACK</a></li>
        <li ><a href="#" >MY PROJECTS</a></li>
        <li ><a href="#" >CONTACT</a></li>
      </ul>
    </nav>
    <hr id="nav_hr" />

    <section >
      <div >
        <p >Mando.</p>
        <p >Full Stack Web Dev</p>
      </div>
      <img  src="img/memoji_img.svg" alt="#" />
    </section>

    <section >
      <article >
        <h1 >My Front-end Stack</h1>
        <div >
          <img  src="img/front-end/js.svg" alt="#" />
          <img  src="img/front-end/html.svg" alt="#" />
          <img  src="img/front-end/css-3.svg" alt="#" />
        </div>
      </article>

      <article>
        <h1 >My Back-end Stack</h1>
        <div >
          <img  src="img/back-end/js.svg" alt="#" />
          <img  src="img/back-end/django.svg" alt="#" />
          <img  src="img/back-end/python.svg" alt="#" />
        </div>
      </article>
    </section>

    <section >
      <h1 >My Learning Projects</h1>
      <article >
        <img  src="img/projects/python_guide.svg" alt="" />
        <p >
          A brief introduction to my favorite. Programming language: Python
        </p>
      </article>

      <article  id="plant">
        <img  src="img/projects/not_a_plant.svg" alt="" />
        <p >
          A product page design that includes images and a sample video <br />
          for the product with a contact form at the end
        </p>
      </article>

      <article >
        <img  src="img/projects/apple.svg" alt="" />
        <p >
          My first html and css project: a little roadmap of Steve Jobs life
          from 1974 to 2011
        </p>
      </article>
    </section>

    <section >
      <h1 >Javascript Projects</h1>
      <article >
        <img  src="img/projects/generative_art.svg" alt="" />
        <p >
          My generative art project made in javascript, with this you can tweak
          <br />
          some parameters to create your own generative frame
        </p>
      </article>
    </section>
  </body>
</html>

CodePudding user response：

As it's working when you decrease the viewport size but not on the browser's emulator I suspect you are missing the meta tag:

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

See MDN for an explanation.

CodePudding user response：

Add screen and in the max-width: 860px media query.