How to create a horizontal overflow?

Asked

Viewed 3,085 times

1

Next, I am editing a site using wordpress and I have some limitations regarding the use of html and etc, I wanted to create a horizontal overflow, so instead of staying as in the image below, the scrollbar was horizontal rather than vertical.

inserir a descrição da imagem aqui

to leave so, with the vertical scrolling, the css is:

.scrolling-wrapper {

max-height: 500px;
 overflow-x: scroll;
}

the scrolling-wrapper would be the div that are all these products, and all products possess the class . card-destq

html css wordpress

1 answer

1


I don’t know exactly the HTML structure you have there Containe and of divs. But here is a simple example made with flexbox that can help you.

.box {
	min-width: 200px;
	height: 100px;
	background-color: red;
	margin: 1rem;
}
.scrolling-wrapper {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: scroll;
}
<div class="scrolling-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Browser other questions tagged html css wordpress

You are not signed in. Login or sign up in order to post.