What is the best way to create a horizontally scrolling row of squares in a mobile view using html and css?

Question

What is the best way to create a horizontally scrolling row of squares in a mobile view using html and css?

Below is a screenshot that I have replicated in the code snippet. The code snippet contains a parent div with two rows mentioned:

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

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

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

</div>

https://i.stack.imgur.com/wN3py.png

Issue at Hand:

I am trying to achieve individual row scrolling on mobile and tablet devices. Despite attempting various CSS codes, the desired scroll effect is not working as expected. Should I also set a min-width property to enable scrolling of rows on mobile and tablet devices?

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

html css responsive-design media-queries horizontal-scrolling

Answer 1

Answer №1

1) Make sure to add overflow-x to the .product-contents element in order to enable horizontal scrolling on smaller screens.
2) Set a min-width for the .product class to prevent it from becoming too small on mobile devices.
3) Utilize the :not selector within the .product class to specify the margin-right property and maintain spacing between each item.
4) Remove the white-space property from the .product-all-contents class under the
```
@media only screen and (max-width: 767px)
```
query, as it is no longer needed.

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

Check out the updated fiddle Here

Answer 2

1) Make sure to add overflow-x to the .product-contents element in order to enable horizontal scrolling on smaller screens.
2) Set a min-width for the .product class to prevent it from becoming too small on mobile devices.
3) Utilize the :not selector within the .product class to specify the margin-right property and maintain spacing between each item.
4) Remove the white-space property from the .product-all-contents class under the
```
@media only screen and (max-width: 767px)
```
query, as it is no longer needed.

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

Check out the updated fiddle Here

Answer 3

Answer №2

Ensuring a fixed height and width for a box, rather than using percentage-based width, is a wise decision as it helps maintain a consistent layout across screens. This also allows users to scroll through individual product rows horizontally.

To achieve this, you can modify your CSS rules for the .product class as shown below. Additionally, I have included an extra media query for enabling horizontal scrolling 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;
  }
}

I hope this solution works effectively for you :)

Answer 4

Ensuring a fixed height and width for a box, rather than using percentage-based width, is a wise decision as it helps maintain a consistent layout across screens. This also allows users to scroll through individual product rows horizontally.

To achieve this, you can modify your CSS rules for the .product class as shown below. Additionally, I have included an extra media query for enabling horizontal scrolling 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;
  }
}

I hope this solution works effectively for you :)

What is the best way to create a horizontally scrolling row of squares in a mobile view using html and css?

Answer №1

Answer №2

Similar questions

Struggling to retrieve the dynamic select list information from HTML and pass it to PHP. Any suggestions or guidance would be greatly

Styling used on the ofx.com website

Tips for revealing a position: absolute div that is currently hidden with display: none styling

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

Leveraging Modernizr for identifying drag and drop functionalities

Tips on stopping slideToggle from opening and closing when clicked for the first time

Creating a text container in PHP for displaying information

The switch switches on yet another switch

Modifying the chart width in Chart.js: A step-by-step guide

Enhancing dynamically generated elements with CSS styling

What is the best way to position a single element in React using the Grid Component without causing any overlap?

Develop a personalized event using JavaScript and activate it

Obtaining select options in jQuery by utilizing the $(this) selector

Steps to dynamically reveal a table row within another row when clicked:

What is the best way to implement a collapsible menu in a fixed sidebar for mobile devices using Bootstrap 4?

Ways to execute a JavaScript function upon a button click instead of during the page load completion

Having trouble with the Bootstrap float right class? Your buttons are refusing to respond?

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Attempting to emulate the grid showcase using flexbox styling

What is the best method to update the content of one div with content from another page using AJAX?