CODEWITHSUNDEEP
wordpresscustom-wordpress-pageselementor
guy fawkes
guy fawkes

Reputation: 1

wordpress horizontal scrolling section in mobile view

I have created a section in wordpress, Which have multiple columns. but in mobile view it display one under another . I want to display columns in a single row . How in the mobile version to display multiple columns side by side with horizontal scrolling , and not one under the other? how to create a horizontal scrolling section in wordpress mobile view using elementor ? please help me . Thanks in advance .

Upvotes: 0

Views: 1628

Answers (1)

Suraj Mishra
Suraj Mishra

Reputation: 1

Create a container and add as many columns as you like with a custom class "card-content". you have to add a custom CSS class to the parent node of the columns container so for this I have added a custom CSS id for 1st column "cardContent1" then I've added custom js to the page:

var cardContent1 = document.getElementById("cardContent1");
var parentNode = cardContent1.parentNode;
parentNode.classList.add("card");

then add custom CSS into the page

.card {
  background-color: #fff;
  min-width: 100%;

}
.card{
    display: flex;
    -webkit-overflow-scrolling: touch;
}

.card {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.card::-webkit-scrollbar {
  display: none;
}

.card-content{
    flex: 0 0 auto;
    margin: 5px;
}

That's it.

Upvotes: 0

Related Questions