My Media Queries aren't applying correctly, am I missing something obvious here?-CodePudding

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

:root {
  font-size: 60%;
}

@media (min-width: 2560px) {
   :root {
    font-size: 70%;
  }
}

@media (max-width: 1440px) {
   :root {
    font-size: 40%;
  }
}

@media (max-width: 1366px) {
   :root {
    font-size: 40%;
  }
}

@media (max-width: 1024px) {
   :root {
    font-size: 30%;
  }
}

* {
  scrollbar-width: 1.6rem;
  scrollbar-color: #bb6642 #000;
}

body::-webkit-scrollbar {
  width: 1.8rem;
}

body::-webkit-scrollbar-track {
  background: #000;
}

body::-webkit-scrollbar-thumb {
  background-color: #bb6642;
  border-radius: 9px;
}

p {
  font-size: 2.4rem;
}

h1 {
  font-size: 7.2rem;
}

.border-radius {
  border-radius: 9px;
}

.orange-box-shadow {
  box-shadow: 15px 15px 9px 0px #bb6642;
}

.grey-box-shadow {
  box-shadow: 0px 0px 5px 7.5px rgb(194, 189, 189);
}

#team-profiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20rem auto;
  width: 70vw;
}

#team-profiles .header {
  margin: 7.5rem 0 3rem 0;
}


/* Styles for 1920 x 1080 */

#team-profiles .management-profiles {
  display: flex;
  justify-content: space-between;
  width: 245rem;
}


/* Styles for 2000px and up */

@media only screen and (min-width: 2001px) {
  #team-profiles .management-profiles {
    width: 330rem;
  }
}


/* Styles for 1600px and below  */

@media only screen and (max-width: 1601px) {
  #team-profiles .management-profiles {
    width: 310rem;
  }
}


/* Styles for 1440px and below  */

@media only screen and (max-width: 1441px) {
  #team-profiles .management-profiles {
    width: 280rem;
  }
}


/* styles for 1360px and below */

@media only screen and (max-width: 1367px) {
  #team-profiles .management-profiles {
    width: 265rem;
  }
}


/* styles for 1280px and below  */

@media only screen and (max-width: 1281px) {
  #team-profiles .management-profiles {
    width: 330rem;
  }
}


/* styles for 1024px and below  */

@media only screen and (max-width: 1025px) {
  #team-profiles .management-profiles {
    width: 265rem;
  }
}

#team-profiles .profile {
  width: 75vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 60vh;
  padding: 3rem 0.5rem;
}

#team-profiles .profile .profile-img {
  width: 35rem;
  border: 0.2rem solid black;
  height: 50rem;
}

#team-profiles .profile h1 {
  font-size: 6rem;
}

#team-profiles .profile h3 {
  font-size: 3.6rem;
  font-weight: 400;
  font-family: Raleway;
}

#team-profiles .profile aside {
  width: 60%;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}

#team-profiles .profile aside section {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 25rem;
  margin-bottom: 3rem;
}

#team-profiles .profile aside .skills {
  width: 35rem;
  padding: 1rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-evenly;
}

#team-profiles .profile aside img {
  width: 5rem;
}

#team-profiles section .interactive-dots {
  min-width: 25rem;
  max-width: 40rem;
  margin: 10rem auto;
}

.interactive-dots {
  display: flex;
  justify-content: space-between;
}

.dot {
  border: .2rem solid #bb6642;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  cursor: pointer;
}

.dot-active {
  background-color: #bb6642;
}

<!DOCTYPE html>
<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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <section id="team-profiles">
    <section>
      <h1 >Management</h1>
      <section >

        <div >
          <div ></div>
          <aside>
            <section>
              <h1>Abdhesh Kumar</h1>
              <h3>Director | Electrical Engineer</h3>
              <div >

              </div>
            </section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra vitae dui eu imperdiet. Aliquam sit amet blandit risus, nec consequat augue. Cras pulvinar leo vel est imperdiet, eu tempus turpis pulvinar. Vestibulum tempor tellus
              pretium volutpat ullamcorper. Cras tincidunt ligula id suscipit pharetra. Nunc bibendum porta magna sed sollicitudin. Etiam eget porttitor enim. Aliquam interdum viverra aliquet. Quisque </p>
          </aside>
        </div>

        <div >
          <div ></div>
          <aside>
            <section>
              <h1>Thalia Balinas</h1>
              <h3>Admin Assistant</h3>
              <div >

              </div>
            </section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra vitae dui eu imperdiet. Aliquam sit amet blandit risus, nec consequat augue. Cras pulvinar leo vel est imperdiet, eu tempus turpis pulvinar. Vestibulum tempor tellus
              pretium volutpat ullamcorper. Cras tincidunt ligula id suscipit pharetra. Nunc bibendum porta magna sed sollicitudin. Etiam eget porttitor enim. Aliquam interdum viverra aliquet. Quisque</p>
          </aside>
        </div>

      </section>
      <div >
        <div ></div>
        <div ></div>
      </div>
    </section>
  </section>
</body>

</html>

I have set up some media queries for the width of an element and I have changed the width value each time I notice it isn't how I want it on each device. But with the more media queries I add they sometimes affect the screen size larger than the one I apply the CSS to even though I have set it as max-width.

The image below is how I have it set up. One reason for the problem could be that I am using the LambdaTest Browser and I set the device zoom to 125% as I have noticed that if the zoom is at 100% the site shown on the test was different than the one on the actual device and 125% gives a fairer reflection of what is shown.

How it should look on each desktop screen

Thanks

CodePudding user response：

media query must be outside of the element

.manegment-profiles {
   styles..
}

@media only screen and .. {
  .manegment-profiles {
    styles..
  }
}

basicly tou override the default css with the css in the media query for the certain class

CodePudding user response：

For each of the devices, please mention the class name where you want to make these changes:

.management-profiles {
  display: flex;
  justify-content: space-between;
  width: 250rem;
}
@media only screen and (min-width: 2001px) {
  .management-profiles {
    width: 330rem;
  }
}
@media only screen and (max-width: 1601px) {
  .management-profiles {
    width: 310rem;
  }
}
@media only screen and (max-width: 1441px) {
  .management-profiles {
    width: 280rem;
  }
}
@media only screen and (max-width: 1367px) {
  .management-profiles {
    width: 265rem;
  }
}
@media only screen and (max-width: 1281px) {
  .management-profiles {
    width: 330rem;
  }
}
@media only screen and (max-width: 1025px) {
  .management-profiles {
    width: 265rem;
  }
}