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;
}
}
htmlcssresponsive-designmedia-querieshorizontal-scrolling

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying a CSS border to a div that perfectly encloses a span, adjusting to the

My goal is to create a nested structure where a div contains a span element like this: ---------- |Sentence| ---------- ----------------- |It's a looooong| |sentence | ----------------- While it works well for short sentences, long ones end u ...

htmlcss

A guide on implementing input tags through instant search in HTML using AngularJS

As someone new to Angular JS, I am working on adding input tags by clicking from instant search using Angular JS. I came across a helpful example of instant search in action through this demo that Google provided. Now, I want to implement the ability to a ...

htmlangularjsselection

Is there a way to determine the file size for uploading without using activexobject?

Can the file size of an uploading file be determined using Javascript without requiring an ActiveX object? The solution should work across all web browsers. ...

javascripthtmlfile-uploadfilesize

Initiating a Page with Dynamic Modal Window according to Backend Exigencies

Dear experts, can you help me with a problem? I want to implement a modal window on an vb.aspx page if a specific condition from the codebehind query is true. How can I achieve this? Thank you! ...

javascripthtmlasp.netvb.netvisual-studio

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

I have recently set up a div element for my slideshow. I've included a script to enable navigation using next and previous arrows. However, I am looking to add an automatic slideshow feature that stops on hover. As a beginner, I would appreciate any a ...

javascriptjqueryhtmlcsshover

Turn off the scrolling bars and only allow scrolling using the mouse wheel or touch scrolling

Is there a way to only enable scrolling through a webpage using the mouse wheel or touch scrolling on mobile devices, while disabling browser scroll bars? This would allow users to navigate up and down through div elements. Here is the concept: HTML: &l ...

javascriptjqueryhtml

Discovering keywords within HTML code and concealing particular content through jQuery

My HTML code snippet is shown below: <div id='p1'> <p>First Paragraph</p> <p>Abbot and Costello - Africa Screams</p> </div> <div id='p2'> <p>Second Paragraph</p> <p>Abbot and ...

jqueryhtml

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

htmlcss

Strange behaviors when using setinterval with classes

Currently working on enhancing a slider functionality, and I have observed that everything is functioning smoothly - function Slider(element) { this.i = 0; this.element = element; var self = this; this.timer = window.setInterval(functi ...

javascriptjquerycssoopvelocity.js

detecting syntax errors in CSS with @media queries and keyframes

/*general CSS setting for all device types above hd*/ * { margin: 0; padding: 0; } #watchonly { display: none; } ...

csshtml

When the flexDirection is set to row, Material-UI input labels will appear outside of

Currently, I am facing an unusual situation. In my code, I have incorporated 2 div elements within a FormControl, and everything appears to be working correctly with the input label for the Select. However, when I apply styling with flexDirection: 'ro ...

cssreactjsmaterial-ui

Unexplainable space or padding issue detected in OwlCarousel grid gallery

There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...

javascriptjqueryhtmlcssowl-carousel

Tips for displaying reCaptcha responses above or below the contact form

Previously, @ADyson provided a solution on how to display returns on a new page. I appreciate the help, but I would prefer to see it under the contact form on that specific contact page. I was advised to use an echo statement and an if statement, which I&a ...

phphtmlforms

Modify the color of a sub division's background using CSS when hovering over

As I work on this Fiddle, my goal is to change the background of each div section individually when moused over. However, currently, hovering over one section triggers the background change for all sections. Is there a way to ensure that only the specific ...

htmlcss

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

javascripthtmlcssangularjs

Transform a div's style when hovering over another div using absolute positioning without repetition

I am facing an issue with multiple divs positioned absolutely on top of a primary div with relative positioning. I want one specific div to change its background-color when hovering over another div within the same parent div. Though I know about ad ...

javascriptjqueryhtmlcss

The FAB button animation is causing delays in the transition process and is not functioning as originally anticipated

I am facing an issue with the FAB button and 3 Icons. The functionality is working fine on click for both show and hide actions, but the transition is too delayed. I want the icons to appear step by step, even though I have adjusted the transition delay se ...

htmlcssangularanimationfloating-action-button

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Identifying Flash content in a unique way

In my dynamic page (let's call it myFlashContainer.jsp), the Flash content changes based on the link that is clicked. The code responsible for rendering the Flash looks like this: <object height="100%" align="l" width="100%" id="player" codebase= ...

javascripthtmljspflash

Exploring Hover Effects in Reactjs and Material UI

I've been working with reactjs and material ui, but I'm having trouble changing the background color of selected items in various components, like in the SelectField. <SelectField floatingLabelText="Choose a sport" value={this.state.val ...

cssreactjsmaterial-ui