Breakpoints - okay. But when it comes to designing a layout that changes with the viewport width within the same breakpoint, I find myself not being that flexible.
Here I have a flex box which is set to left to right - wrap down alignment and it looks okay when the opening hours, phone number & mail are on the left and the addresses are on the right, but when the viewport width shrinks they get stacked under each other which is amazing but somehow the wrapper for these details (mail, phone, address, opening hours) takes the whole space of the box that they are in when they stack under each other and it doesn’t wrap tightly around the actual content. How to get to do it and get everything in the middle (I want all the details to be stacked under each other when tight viewport width BUT I want them to be in the centre and left aligned so all the icons are in the same line)
Thank you very much, I find it even hard to explain what I want.
To achieve your layout with left-aligned content that’s vertically centered in the container, you can use flexbox properties. Here’s how to set it up:
The parent container should be set as a flex container with vertical direction. In the flex settings:
Set the Direction to “Vertical”
In the X axis dropdown (horizontal alignment), select “Left” to keep your content left-aligned
In the Y axis dropdown (vertical alignment), select “Center” to vertically center all content within the container
The content inside will now stack vertically while maintaining left alignment, and the entire stack will be centered vertically within the parent container.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
