display: flex; not working in less than 480 pixel to 320 pixel of screen size

Issue

Can anyone plz help me i am stuck in this from a while. my product display cards are not in flex position when i set the screen the size width between 320 to 480 pixel.
Hope any css expert can help me. and i also did some diff size of screen by @media screen.
But plz view this coding more than width of 480 px to understand what i want to make 🙂
i pasted my both html and css code below.

all the pics are in github but css is 1 or 2 line old in github respo.
https://github.com/daksh100sharma/new-daddy-s-games-
if you are unable to see codes or images just press code under the licesence which i deleted.

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
     rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">

    <title>Home</title>
    <link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
 crossorigin="anonymous"></script>

 <script>
  //  $(window).resize(function(){location.reload();});
 //refresh page on browser resize
$(window).bind('resize', function(e)
{
  console.log('window resized..');
  this.location.reload(false); /* false to get page from cache */
  /* true to fetch page from server */
});
 </script>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Accessories</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="graphics-card.html">Graphics card</a>
              </li>
            </ul>
            <span class="navbar-text">
              <!-- Navbar text with an inline element -->
            </span>
          </div>
        </div>
      </nav>
<div class="show-case">
<div class="show-case-1st-line">
    <div class="graphics-card" >
        <h1>Graphics card</h1>
        <img class="img001" src="001.jpg" type="image">
        <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
    </div>
  
 


<div class="gaming-mouse" >
      <h1>GAMING MOUSE</h1>
      <img class="img002" src="002.jpg" type="image">
      <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>

    </div>  
  <div class="gaming-headphone" >

    <h1>GAMING HEADPHONES</h1>
    <img class="img003" src="003.jpg" type="image">
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>

 </div>


 </div>



<div class="show-case-2nd-line">

  <div class="gaming-chair">
    <h1>COMFY CHAIR</h1>
    <img class="img005" src="005.jpg" image>
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
    
  </div>

  <div class="fps-monitor">
    <h1>FPS MONITOR</h1>
    <img class="img006" src="006.jpg" image>
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
    
  </div>

  <div class="ram" >

    <h1>RAM</h1>
    <img class="img004" src="004.jpg" type="image">
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>

    </div>
    
</div>

</div>
<br>
<div class="game-display">
  <img class="img007" src="resorce/home-minecraft.jpg" type="image">
  <button class="img007-btn"><a href="https://google.com">Buy now</a></button>
</div>



<br>
<hr>
    <div class="about-us">
        <h1>About Us</h1>
        <p>We are a new computer accessories store.<br>
           We would love to have great customers like you</p>
    </div>

</body>
</html>

This is my css but plz dont forgot that i have also written @media screen for device width of 320 to max device width to 480px

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #732673;
    /* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}

hr{
    color: white;
    margin: auto;
}

.show-case{
    text-align: center;
    margin: auto ;
    display: block;
}

.show-case-1st-line{
    display: flex;
    text-align: center;
    margin-top: 10px;
    margin: auto;
}

.graphics-card{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.graphics-card h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img001{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

.graphics-card-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.graphics-card-btn a{
    text-decoration: none;
}


/* /////////      SHOW-CASE [GAMING MOUSE]      /////////    */

.gaming-mouse{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin: auto;
    margin: 0;
    margin-top: 10px;

}

.gaming-mouse h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img002{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .gaming-mouse-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
} */

.gaming-mouse-btn a{
    text-decoration: none;
}



.gaming-headphone{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.gaming-headphone h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img003{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .gaming-headphone-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
} */

/* gaming-headphone-btn a{
    text-decoration: none;
} */




.ram{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.ram h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img004{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .ram-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.ram-btn a{
    text-decoration: none;
} */





.show-case-2nd-line{
    display: flex;
    text-align: center;
    margin-top: 10px;
    margin: auto;
}

.gaming-chair{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.gaming-chair h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img005{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

.gaming-chair-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.gaming-chair-btn a{
    text-decoration: none;
}


.fps-monitor{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.fps-monitor h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img006{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .fps-monitor-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.fps-monitor-btn a{
    text-decoration: none;
} */


.game-display img{
    max-width: 90%;
    display: flex;
    margin: auto;
}

.img007{
    border-radius: 13px;
}

.img007-btn{
    margin: auto;
    display: block;
    margin-top: 10px;
    background-color: green;
}

.img007-btn a{
    color: white;
    text-decoration: none;
    padding: 7px;
}
.about-us{
    position:relative;
    margin:auto;
    border-radius: 13px;  
    max-width: 80%;
    height: auto;
    text-align: center;
    font-size: 3px;
    color:aqua;
    position:static;
}

.about-us h1{
    font-size: 28px;
    text-decoration: underline;
    text-decoration-color: black;
}

.about-us p{
    color:#ff80b3;
    font-size: 17px;

}
    
  
  
/* Smartphones (portrait and landscape) 320 - 480 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    .show-case{
        display: block;
        padding:0;
    }
    /* .show-case-1st-line{
    } */
    .show-case-2nd-line{
        display: flex;
        margin: 0%;
    }
    .graphics-card{
            margin: auto;
            margin-bottom: 10px;
            max-width: 40%;
        }
    .gaming-mouse{
        margin: auto;
        margin-bottom: 10px;
        max-width: 40%;
    }
    .gaming-headphone{
        margin: auto;
        margin-bottom: 10px;
        max-width: 40%;
       
  }
  .ram{
      margin: auto;
      margin-bottom: 10px;
      max-width: 40%;
  }
  .ram h1{
      padding: 12px;
      position: relative;
  }
  .gaming-chair{
      margin: auto;
      margin-bottom: 10px;
      max-width: 40%;
  }
  .fps-monitor{
      margin: auto;
      margin-bottom: 10px;
      max-width: 40%;
    }
    .fps-monitor h1{
        padding: 1px;
        position: relative;
    }   
    .show-case-2nd-line{
        display:flex;
        display: block;
        margin-bottom: 10px;
        padding:0;
  }
}

/* Small phone 245 283 */
@media only screen and (min-device-width : 245px) and (max-device-width : 229px){
    .show-case{
        max-width: 70%;
        display:flex;
        margin: 10px;
    }
    .show-case-2nd-line{
        max-width: 70%;
        display:flex;
        margin: 10px;
    }
    .graphics-card{
        margin-bottom: 10px;
    }
    .gaming-mouse{
        margin-bottom: 10px;
    }
    .gaming-headphone{
        margin-bottom: 10px;
    }
    .ram{
        margin-bottom: 10px;
    }
    .gaming-chair{
        margin-bottom: 10px;
    }
    .fps-monitor{
        margin-bottom: 10px;
    }

}



Solution

You are using display:flex and display:block in the same place. For this, the problem is happening. Please remove display: block from —>>".show-case-2nd-line" this class. here is a screenshot, you can check it.
Plese check the screenshot

Answered By – Rafsan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published