What is the best way to implement horizontal scrolling for square boxes arranged in a row using html/css?

Recently, I created a fiddle that looks amazing in desktop view, with square boxes aligned perfectly as shown below:

https://i.sstatic.net/F2flK.png

The CSS code snippets used to achieve this horizontal alignment of the square boxes are:

.squares {
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 1rem;
  position: relative;
  width: 70%;
  max-width: 1080px;
  margin: auto;
  flex-wrap: wrap;
}



Now, here's the challenge:

I am looking for suggestions on what additional CSS code I should include in the fiddle to enable horizontal scrolling of the square boxes in a mobile view, similar to this example:

https://i.sstatic.net/cqCqp.png

Answer №1

Experience the innovative feature of horizontal image scrolling. This unique function can be found on various websites as a nod to affiliate connections.

Find out more

Answer №2

To achieve the desired effect, simply include the CSS property overflow-y: auto in the styling of the .squares div while eliminating the flex-wrap: wrap.

For a practical demonstration, refer to this code snippet

Additionally, make sure to incorporate min-width: 150px in the CSS rule for the .squares .square element.

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

What method does the CSS standard dictate for measuring the width of an element?

In terms of measuring an element's width, Chrome appears to calculate it from the inner margin inclusive of padding. On the other hand, Firefox and IE determine the width of the box from the border, excluding padding but including the margin. Personal ...

Tips for adjusting the page display when errors occur during form submission

Within my django application, I have designed a page featuring a button that controls the operation of a clock. Initially, the page displays only the button, with a hidden form where users can input details such as their name and description. When the butt ...

Ensuring that two elements in HTML/CSS always appear on the same line

Within my HTML code, I have implemented 2 tables using the PrimeFaces UI Framework for Java. Each table contains a button, and I am seeking a way to ensure that both buttons always appear on the same line. To achieve this alignment, I applied a style with ...

Tips for creating a webpage with a spotlight effect using the mouse cursor

My goal is to create a webpage that is completely dark (as in night without any light at all) and have the mouse cursor emit a light effect to illuminate the surroundings. What tools or techniques should I use to achieve this unique effect? I've searc ...

What could be causing sporadic disappearance of my background image?

Feeling overwhelmed by this sudden issue on my WordPress site. The logo isn't working properly, and I've saved this page as HTML for reference. Check out the link: Oddly enough, leaving a page open for a while or navigating away and returning t ...

What is the proper way to mention "a" within an unsorted list?

I currently have a div section with the following content: <ul id = "issues"> <li> <h1>title</h1> <p>text text text </p> <a class="next" href="#">next</a> </li> <li> <h1>title</h1> &l ...

How come the section of a web page covers the header when the header's position is set to fixed?

My attempt at fixing the position property of the header as fixed has not been successful. When I scroll down the page in mobile view, the section part of the webpage overlaps the header part. The home section in this code functions properly, but the About ...

Fixing content at the bottom inside a container with Bootstrap 4

My app is contained within a <div class="container">. Inside this container, I have an editor and some buttons that I always want to be displayed at the bottom of the screen. Here's how it looks: <div class="container> // content here.. ...

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

I have encountered an issue while fetching product categories using API. The problem lies in the fact that the categories are being retrieved as an object instead of an Array which is required for *ngFor to work in Ionic. Any assistance on how to define th ...

Attempting to fill a collection of JSON entities through a GET call?

When handling a GET request that contains a list of JSON objects, I want to display the data in an input field on the screen using ng-model for data binding. The structure of the JSON get request is as follows: [{"make":"Mahindra","vin":"1987","model":"XU ...

Having trouble dynamically adding HTML elements in JQuery

I am dynamically adding HTML elements during runtime using an AJAX call from a JavaScript file. Currently, I am attempting to use a combo box drop-down element to display a list of data. Here is how I am trying to achieve this in my script: $("#myList") ...

How can I stack images on top of each other within a div

Currently, I am in the process of creating a blackjack game and encountering an issue with overlapping cards. Despite implementing the code below, all I see is a column of cards displayed. I have looked at similar questions for guidance, but I'm unab ...

Leverage JavaScript to customize the appearance of existing links within an external HTML document

Forgive me for my lack of expertise in Javascript. I will do my best to explain clearly. On my website, I have an external html file for the navigation menu that is loaded with javascript to simplify editing (so I don't need to update nav elements on ...

I am facing issues with my submit buttons as they are not functioning

Once I hit the submit buttons, there seems to be an issue with redirecting to another page. Could anyone assist in identifying the error within this code and why my buttons "typ1" and "cod" are not redirecting to the specified location? <?php inc ...

Encountering difficulty loading a Laravel project due to an error

I encountered an issue with the master.blade.php file located in the views folder. The error message reads as follows: *<br/>ParseError <br/>syntax error, unexpected '{', expecting ')' (View: E:\soft\Xampp2\h ...

Two scenarios for tag class and just class are considered in this discussion

FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...

Animation displayed on page load before running

Is there a way to ensure that my animation runs smoothly without any lag or jankiness, either while the page is loading or immediately after loading? I have attempted to preload the images using a preload tag in the header of my HTML, but unfortunately, t ...

Crash in the Android WebView of the Galaxy S3 device due to Signal 11 SIGSEGV

My Android WebView is experiencing issues with memory access and crashes on a Galaxy S3 running Android 4.0.4. The HTML5 content includes interactive battles where enemies appear for the user to slash, interspersed with normal HTML pages. Despite the use o ...

Tips for incorporating media queries into angular component's styles.scss

I've been attempting to implement media queries in my component's styles, but unfortunately, when I resize the window, nothing seems to happen. @media query screen and (max-width: 768px) { /* Insert changes here */ } It's completely unres ...

Using jQuery to generate a JSON object dynamically based on the values entered in each input field

I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...