I want all the flex item card components to be centred within the parent for computer devices, however for devices that are smaller, from about 1200px and downwards I want the flex items to start overflowing the parent allowing you to horizontally scroll. I'm going to add some scroll snapping afterwards as well. I managed to get it kinda working by using a media query and setting the justify-content back to initial from centred, however I get no spacing on the sides.
I want the overflow to not affect the position of the left most card, so the scroll bar should be on the left most side, not the center
Here is some pictures of what is looks like now:
and my code => (this is using styled components, if you don't know it, I'll try to be as explicit as possible)
the card component:
export const SelectCardWrapper = styled.div`
flex-basis: 250px;
flex-shrink: 0;
height: 435px;
background: #434055;
border-radius: 25px;
display: flex;
align-items: center;
flex-direction: column;
padding: 16px;
box-shadow: 0 0 8px 2px rgba(0,0,0, .25);
${SelectCardOption} { <== the individual options
margin-bottom: 11.2px;
}
${SelectCardOption}:last-child {
}
`;
the card component container:
export const CardContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
border-bottom: 1px solid white;
flex-wrap: nowrap;
flex: 1;
padding: 0 50px;
${SelectCardWrapper} { <== give the flex items a fixed gap
margin: 20px;
}
@media (max-width: 1200px) {
justify-content: initial; <== this was the solution, but it's not getting quite the desired effect.
}
`
if anyone could answer in pure html and css that would be nice, I don't need it in react or styled components.
Edit:
still can't get this to work after hours of trying, I recreated it in code sandbox, any suggestions
https://codesandbox.io/s/blissful-northcutt-1ceo6?file=/style.css
