I have what seems to be a pretty straightforward flex container, which is configured like this -
But no matter what I change, the padding on the right side of the container isn’t applied. It’s only visible if I switch the container’s justification from left to right.
I’m hoping someone here can spot what needs to be changed in order to enable me to pad both sides of the container?
Here is my site Read-Only: LINK
I can’t seem to find the problem. Is there something that I’m not understanding?
It’s possible your window was just acting unresponsive. Sometimes when I’m working heavy in Interactions I have to refresh the page to see my animations.
Sorry I should have said this is an issue in the mobile view, where the page width is narrower than the horizontal section.
The padding still works for me. But I can assume you were trying to make them all fit. I changed the flex to Vertical and tweaked a few settings so that it would fit properly
Thanks for that but I’m trying to create a list that scrolls horizontally, rather than showing all of the cards in a vertical list.
Here’s how the padding looks (it’s not visible) on mobile, once you scroll through the list to the 3rd card. This is also visible in the mobile view. There should be a gap between the right hand side of the card and the edge of the screen.
In other words, the right hand side of the list should have the same gap as the left hand side of the list.
I don’t want to have a border on the right hand side of the page which covers the cards, which is why I’ve used padding, rather than margin.
I’ve now ‘solved’ this by adding an additional card / div block to the container and adding padding to that card for the mobile view. Obviously a bit of a hack so it seems very strange that there doesn’t seem to be an obvious fix for this using the in-built features.
