Media Query and Image Swapping-CodePudding

I want the image in my site to completely change when the browser is resized. I've been using media-queries, but I can't seem to get it right. Any thoughts/tips? The thing is I have tried the display trick with media query but its not working

I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.

.blocks {
  height: 58%;
}

.mob {
  display: none;
}

@media (max-width:400px) {
  .mob {
    display: block;
  }
  .blocks {
    display: none;
  }
}

<div >

  <img  src="https://via.placeholder.com/200" alt="laptop-mockup">
  <img  src="https://via.placeholder.com/200/ff0000" alt="android-mockup">

</div>

The whole html and css code: HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>News homepage</title>
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto Sans:wght@600;700;800&family=PT Sans:wght@700&display=swap" rel="stylesheet">
</head>

<body>
  <div >
    <div >
      <nav >
        <a  href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">

          <span ></span>
        </button>
        <div  id="navbarSupportedContent">
          <ul >
            <li >
              <a  href="#footer">Home </a>
            </li>
            <li >
              <a  href="#pricing"> New </a>
            </li>
            <li >
              <a  href="#cta"> Popular </a>
            </li>
            <li >
              <a  href="#footer"> Trending </a>
            </li>
            <li >
              <a  href="#footer"> Categories </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div >
      <div >

  <img  src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
  <img  src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">

</div>
      <div >
        <h1 >The Bright<br />Future of<br />Web 3.0?</h1>
      </div>
      <div >
        <h1 >We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
          But is it really fulfilling its promise?</h1>
      </div>
      <button  type="button" name="button">READ MORE</button>
      <div >
        <div >
          <h1>New</h1>

          <h2>Hydrogen VS Electric Cars</h2>
          <h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
          <hr>

          <h2>The Downsides of AI Artistry</h2>
          <h3>What are the possible adverse effects of on-demand AI image generation?</h3>
          <hr>

          <h2>Is VC Funding Drying Up?</h2>
          <h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
        </div>
      </div>
    </div>
  </div>
  <div >
    <div >

      <div >
        <div >
          <div >
            <img  src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
          </div>
          <div >
            <div >
              <h1 > 01</h1>
              <h2 > Reviving Retro PCs</h2>
              <h3 > What happens when old PCs<br>are given modern upgrades?</h3>
            </div>
          </div>
        </div>
      </div>
      <div >
        <div >
          <div >
            <img  src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
          </div>
          <div >
            <div >
              <h1 > 02</h1>
              <h2 > Top 10 laptops of 2022</h2>
              <h3 >Our best picks for various <br> needs and budgets.</h3>
            </div>
          </div>
        </div>
      </div>


      <div >
        <div >
          <div >
            <img  src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
          </div>
          <div >
            <div >
              <h1 > 03</h1>
              <h2 > The Growth of Gaming</h2>
              <h3 >How the pandemic has sparked <br> fresh opportunities.</h3>
            </div>
          </div>
        </div>
      </div>
    </div>




<hr >
    <div >
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://cyberoctane29.github.io/MySite/">Saswat Seth</a>.
    </div>
</body>

</html>

CSS

       .navigator {
  margin-bottom: 2%;
}

body {
  padding: 0% 10% 2% 10%;
}

.nav-link {
  color: black;
}

:hover.nav-link {
  color: #6B728E;
}

.navigator {
  padding: 2% 5% 0% 0%;
}

.blocks {
  height: 58%;
}

.mob {
  display: none;
}

@media (max-width:400px) {
  .mob {
    display:block;
  }

  .blocks {
    display:none;
  }
}

.new {
  height: 85%;
  width: 23%;
  background: hsl(240, 100%, 5%);
  position: absolute;
  right: 140px;
  padding: 2%;
}

.navelement {
  padding-right: 6%;
  font-size: 100%;
}

h1 {
  color: hsl(35, 77%, 62%);
  font-family: 'noto sans';
  font-weight: 600;
}

h2 {
  color: #fff;
  font-size: 23px;
  margin-top: 10%;
  font-family: 'noto sans';
  font-weight: 700;
}

h3 {
  color: #6B728E;
  font-size: 15px;
  padding: 4% 0%;
  line-height: 25px;
}

hr {
  color: #fff;
  border-top: solid white;
}

.tag {
  position: absolute;
  bottom: 20px;
}

.tagline {
  font-family: 'noto sans';
  color: #000;
  font-weight: 800;
  font-size: 60px;
}

.read {
  padding: 2% 38%;
  position: absolute;
  bottom: 54px;
  right: -15px;
}

.readline {
  font-size: 110%;
  color: #6B728E;
  line-height: 27px;
}

.button-50 {
  height: 49px;
  width: 200px;
  appearance: button;
  background-color: hsl(5, 85%, 63%);
  background-image: none;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  margin: 20% 5% 10% 0%;
  overflow: visible;
  padding: 14px 30px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  position: absolute;
  bottom: -45px;
  right: 45%;
}

.button-50:focus {
  text-decoration: none;
}

.button-50:hover {
  text-decoration: none;
}

.button-50:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-50:not([disabled]):active {
  box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

.readmore {
  margin: 10% 3% 5% 0;
  font-family: 'Poppins';
  font-weight: 400;
}

.info {
  margin-top: 5%;
  margin-left: 10%;
  position: absolute;
  right: 10%;
}

.infoimg {
  width: 315%;
  padding: 20%;
}

.infohead1 {
  color: #7D9D9C;
}

.infohead2 {
  color: #000;
}

.inf {
  padding: 30%;
  margin-left: 68px;
  white-space: nowrap;
}

.hori {
  margin-top: 10%;
  color: #000;
  border-top: solid black;
}

CodePudding user response：

@media screen and (max-width:400px) {
  .mob {
    display: block;
  }

CodePudding user response：

@media (max-width:350px) {
    img{
        object-fit: cover;
        height: 400px;
    }
}