How to make the squares scroll in a row in a mobile view in html/css?

Question

I have a screenshot below which I have replicated in the fiddle. In the fiddle I have a made a parent div in which I have mentioned all the 2 rows:

<div class="product-all-contents">

<div class="product-contents">
</div>

<div class="product-contents">
</div>

</div>

Problem Statement:

I want to make the individual row scroll in the mobile/tablet view. The CSS codes which I have tried in order to make it scroll are as follows be it doesn't seem to work. Do I need to set min-width as well in order to make the rows scroll in mobile/tablet view?

@media only screen and (max-width: 767px)
{
.product-all-contents
{
  overflow-x: auto;
}
} 

Answer 1

• 1) You need to set overflow-x to .product-contents so that it shows scroll on smaller screen
• 2) Set min-width to .product so that it will not get smaller on small device
• 3) Using :not selector in .product, set margin-right so that space between each item will remain
• 4) Remove white-space from the .product-all-contents in @media only screen and (max-width: 767px) as there is no need of it now

.product-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  overflow-x: auto;
}
.product-contents .product {
  width: 10%;
  min-width: 90px;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}
.product-contents .product:not(:last-child) {
    margin-right: 15px;
}
.product-contents .product img {
  max-width: 100%;
}

@media only screen and (max-width: 767px)
{
.product-all-contents
{
  overflow-x: auto;
}
}

<div class="product-all-contents">

<div class="product-contents">
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
</div>

<div class="product-contents">
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
</div>

</div>

Updated fiddle Here

Answer 2

it's a good idea to fix height and width of a box instead of using width in percentage because of this layout of the page will be consistent on all screens and a user can also able to scroll individual product row horizontally

Just change your CSS rules as below I have changed your CSS rules of .product class and added one extra media query for the horizontal scroll in a product row.

.product-contents .product {
    min-width: 160px;
    width:160px;
    text-align: center;
    height: 150px;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145,147,150);
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-left: 10px;
}

@media only screen and (max-width: 767px)
{
  .product-contents{
     overflow-x: auto;
  }
}

Hope this work for you :)