Grid box isn't responsive when minimized the screen size

Question

So I have created this grid box and each box contains a product image, product heading, and little description. The Grid box looks fine in normal desktop screen size but when minimized it doesn't look good. I have tried media query and width, margin-right but it still isn't working. This is the normal window size. I want the box size to set max-width in minimized screen size.

This is the minimized size

My HTML Code


    
        
        DS-7104HQHI-K1
        4-ch 1080p H.265 DVR
    
  
    .col-6 .col-sm-3

    
    

    .col-6 .col-sm-3
    .col-6 .col-sm-3

CSS Code

.grid-dvr {
  margin: 20px;
  border-radius: 5px;
  height: 100px;
  background-color: white;
}

.grid-dvr .grid-image {
  max-width: 150px;
  float: right;
}

.grid-box-heading {
  float: left;
  margin-top: -60px;
}

.grid-box-description {
  font-size: 12px;
  align-items: center;
  margin-top: 40px;
}

user_14334189 · Answer

You should not use col-6 if you want to make the divs full width in xs size.Instead use col or col-12 instead of col-6

.grid-dvr {
  border-radius: 5px;
  height: 100px;
  background-color: black;
}

.grid-dvr .grid-image {
  max-width: 150px;
  float: right;
}

.grid-box-heading {
  float: left;
  margin-top: -60px;
}

.grid-box-description {
  font-size: 12px;
  align-items: center;
  margin-top: 40px;
}




  
    
    DS-7104HQHI-K1
    4-ch 1080p H.265 DVR
  

  .col-6 .col-sm-3

  
  

  .col-12 .col-sm-3
  .col-12 .col-sm-3

Grid box isn't responsive when minimized the screen size

1 Answers