How To Horizontal Scroll Square Boxes In A Mobile View In Html/css?

I have a website which looks perfect on the desktop view. I have created the fiddle as well so that its easy to make changes. The snippets of CSS codes which I have used in order

Solution 1:

Try also changing:

.squares{
  flex-wrap: nowrap;
}
.squares .square{
  flex: 1 0 auto;
}

This prevents the squares from going to the second line.

Solution 2:

Just add the following code as an example:

CSS

@media only screen and (max-width: 767px) {

    .squares {
        overflow-x: scroll;
        overflow-y: hidden;
        height: 200px;
        white-space:nowrap
    }

    .squares .square {
        width: 30%;
        text-align: center;
        height: 150px;
        display:inline-block; /* Added */
        margin-bottom: 11%;
        /*padding-top: 1%;
        padding-left: 1%;
        padding-right: 1%;*/
        border-style: solid;
        border-width: 3px;
        border-color: rgb(145,147,150);
        border-radius: 10px;
    }

}

HTML

<div class="squares">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>