-1

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;
    }

}



2 Answers 2

1

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

1
  • Lol. I am sorry l. I should check the code from downside Oct 17, 2021 at 8:41
1

Just an additional point of view: why not using directly the power of flex in a smarter way?

With the solution I left below you would have two great advantages:

  • you would be able to add/remove the categories without the need to create classes as show-case-1st-line every 3 additional items. Of course this would make your code more maintanable on the long run
  • with your current solution [even with the correction currently marked as answer] when the width of your screen drops approx below 380px the elements of each line aren't aligned anymore and in your particular case the rows have different widths, i.e. this is what happens for a width of 300px

current solution

A few hypotheses behind my code:

  • I assumed you need to show at most 3 categories on the same line [from your original solution]
  • I assumed that when the width decreases under 320px it is better to have one item per line [in order to improve the UX]
  • I assumed that in case of large screen you don't want to stretch the maximum number of elements per line [3 because of what said in my first hyp] in order to keep quality pictures, so if the screen it's larger than 750px the elements will stop stretching

Without further ado, this is the JSFiddle

  //  $(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 */
});
*{
    padding: 0;
    margin: 0;
}

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

hr{
    color: white;
    margin: auto;
}

#show-case{
    display: flex;
    flex-wrap: wrap;
    margin: auto ;
    text-align: center;
    max-width: 750px;
}

.graphics-card{
    width: 250px;
    height: auto;
    flex: 33.3%;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 10px;
    text-align: center;
    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;
    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;
    flex: 33.3%;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px;
    padding: 10px;
    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;
    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;
    flex: 33.3%;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 10px;
    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;
    border: 2px #67b581 solid;
}

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

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


.gaming-chair{
    width: 250px;
    height: auto;
    flex: 33.3%;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 10px;
    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;
    flex: 33.3%;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 10px;
    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;
    border: 2px #67b581 solid;
}

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

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


.ram{
    width: 250px;
    height: auto;
    flex: 33.3%;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 10px;
    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;
    border: 2px #67b581 solid;
}

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

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


.about-us{
    position:relative;
    margin:auto;
    border-radius: 13px;  
    max-width: 80%;
    height: auto;
    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;

}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 320px) {
  .graphics-card, .gaming-mouse, .gaming-headphone, .gaming-chair, .fps-monitor, .ram
  {
    flex: 100%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<!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>
 </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 id="show-case">

<div class="graphics-card" >
        <h1>Graphics card</h1>
        <img class="img001" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/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="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/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="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/003.jpg" type="image">
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>

 </div>


  <div class="gaming-chair">
    <h1>COMFY CHAIR</h1>
    <img class="img005" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/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="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/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="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/004.jpg" type="image">
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
    </div>
    

</div>


<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>

</body>
</html>

The following screenshots show the layout improvements respectively at 480px, 420px, 240px

1perline 2perline 3perline

1
  • Thx, I will understand this, it's so confusing to me coz I am so avg in css. I made this page coz of javascript practising mainly. But I will do sure I will improve my css along with this. Oct 17, 2021 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.