CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
flash
flash

Reputation: 1519

Horizontal scrolling in mobile view in html/css

I am working on a fiddle in which I want to horizontally scroll the contents in a mobile view.

At this moment in a desktop view, they are aligned in a straight line as shown below:

enter image description here

I want the above contents to scroll in a mobile view.

The CSS codes which I have used in order to align the contents in a straight line in a desktop view are:

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;


}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}


Problem Statement:

I am wondering what CSS codes I should add in the fiddle so that the contents present in the above screenshot scroll in a mobile view. I tried with overflow: scroll and white-space: nowrap but somehow I wasn't able to scroll the contents in mobile view.

Upvotes: 2

Views: 38876

Answers (3)

Moftah
Moftah

Reputation: 179

For any page horizontal scroll, you can fix it by adding this snippets

@media screen and (max-width:767px) {
html, body {overflow-x: hidden;}
}

Upvotes: 1

dbenmore
dbenmore

Reputation: 106

Try adding flex none to the divs so that their size is preserved and a media query where you want desktop to start.

.images {
    display: flex;
    align-items:center;
    background-color: #eee;
    padding: 1rem;
    overflow-x: scroll;
}

.images > div {
    flex: none;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
    max-width:100%;
    width: 100%;
}

@media (min-width: 960px) {

  .images {
     overflow-x: visible;
  }

  .images > div {
    flex-basis: 0;
    flex-grow: 1;
   }
}

Upvotes: 7

Abhishek Shah
Abhishek Shah

Reputation: 460

You can add this div to your code to scroll horizontally. In image 1 you can add your image.(That is for example only)

.container {
	width: 30em;
	overflow-x: auto;
	white-space: nowrap;
}
<div class="container">
<table>
	<tbody>
		<tr>
			<td>Image 1</td>
			<td>Image 2</td>
			<td>Image 3</td>
			<td>Image 4</td>
			<td>Image 5</td>
			<td>Image 6</td>
                        <td>Image 1</td>
			<td>Image 2</td>
			<td>Image 3</td>
			<td>Image 4</td>
			<td>Image 5</td>
			<td>Image 6</td>
		</tr>
	</tbody>
</table>
</div>

Upvotes: 3

Related Questions