CODEWITHSUNDEEP
javascripthtmlcss
adibs
adibs

Reputation: 1

Have a div that isn't scrolling horizontally when in mobile view

I have a bunch of div cards inside two container divs that display as two separate rows when in desktop view. All of these elements are wrapped in a wrapper div.

I created a third container div which is display none and is only for mobile view. In the example I've provided if you go below 1128px then this third div will appear. The third div contains all the elements from the two previous divs and instead the elements go off the screen. This is done on purpose so that a user can scroll horizontally and see all of the elements.

The problem I'm having is setting overflow-x: scroll on the third div and getting only the elements in that container to move. I've tried many different methods and the solution that came closest to what I want is setting the wrapper div to overflow-x: scroll.

Is there a way to get only the elements inside the third div to scroll instead of having to scroll the entire wrapper?

HTML:

<div class="wrapper">
  <h1>Some Random Header</h1>
  <div class="container">
    <div>Project One</div>
    <div>Project Two</div>
    <div>Project Three</div>
    <div>Project Four</div>
  </div>
  <div class="container">
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
  </div>
  <div class="container mobile">
    <div>Project One</div>
    <div>Project Two</div>
    <div>Project Three</div>
    <div>Project Four</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
  </div>
</div>

CSS:

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

h1 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.container div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: 15rem;
  border: 2px solid black;
  border-radius: 15px;
}

.container:first-of-type {
  margin-top: 3rem;
}

.container.mobile {
    display: none;
}

@media (max-width: 1128px) {
  .container {
    display: none;
  }
  
  .container.mobile {
    display: flex;
    width: max-content;
  }
}

Please check out the following code for reference: https://codepen.io/sadib1392/pen/BarOvNB

Upvotes: 0

Views: 46

Answers (1)

OMGDrAcula
OMGDrAcula

Reputation: 1064

Instead of having the width set to max content, give the mobile container a fixed width and set its overflow-x: scroll. That should put a scroll bar on just the mobile container. You will also have to give the divs a min width.

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-x: hidden;
}

h1 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
}

.container div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 15rem;
  height: 15rem;
  border: 2px solid black;
  border-radius: 15px;
}

.container:first-of-type {
  margin-top: 3rem;
}

.container.mobile {
    display: none;
}

@media (max-width: 1128px) {
  .container {
    display: none;
  }
  
  .container.mobile {
    display: flex;
    max-width: 100%;
    overflow-x: scroll;
  }
}
<div class="wrapper">
  <h1>Some Random Header</h1>
  <div class="container">
    <div>Project One</div>
    <div>Project Two</div>
    <div>Project Three</div>
    <div>Project Four</div>
  </div>
  <div class="container">
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
  </div>
  <div class="container mobile">
    <div>Project One</div>
    <div>Project Two</div>
    <div>Project Three</div>
    <div>Project Four</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
  </div>
</div>

Upvotes: 2

Related Questions