0
202
ViewsHow do I scroll horizontally in responsive view?
As you can see in the picture, the cards are arranged one after the other. But I want it to be scrolled sideways instead of sorting it one under the other.
How can I solve it?
html
<div className="home__container only-mobile">
<div className="home__content">
<h3>{t('home.for_me')}</h3>
<div>
{campaignData
? campaignData.map((campaign, i) => {
return (
<DiscountPolicyCard
campaignList={campaign}
key={'campaignMobile' + i.toString()}
/>
);
})
: null}
</div>
</div>
</div>
css
.home__container.only-mobile {
display: grid;
place-content: center;
.home__content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 180px;
h3 {
color: gray;
}
&>div {
justify-content: center;
align-items: center;
}
}
}
·
Juan Pablo Isaza
1 answers
Answer question0
.container {
display: flex;
flex-wrap: no-wrap;
gap: 1rem;
max-width: 100%;
overflow: auto;
}
.inner {
background: lime;
min-width: 200px;
height: 100px;
}<div class="container">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>Remove the flex-wrap: wrap; it tells the browser to wrap elements inside of a flexbox if there is not enough space and that's bascially the opposite of what you are trying to achieve.
If it doesn't work out of the box after deleting add flex-wrap: no-wrap; instead and add a min-width to the containers to make sure they don't get squished.
That's the first step after that make the container max-width: 100% and overflow: auto that should be it.
·
Juan Pablo Isaza
Report
Answer question