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/bootstrap@5.1.3/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/bootstrap@5.1.3/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;
}
}
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
