Hello dear Editor X Group!
I have a question regarding my spacing.
Between 2021px - 1001px it looks like in the first video.
The repeater keeps the distance between 2021px and 1001px left and right always the same, but unfortunately my 3 fields are much too thin when I arrive at 751px. Is there any way to dock it so that it looks as smooth as in the second video? (Sorry for the bad quality)
So the distance left and right should become less, but the 3 elements should remain the same width as long as possible.
Hey there!
Certainly possible by using custom breakpoints. You would create a custom breakpoint at the size where you want the switch between the fixed container size and the fluid container size to happen. From there, you can follow these steps:
-
Go to the lowest value of the higher breakpoint
-
Set your Padding the same as the margin on the breakpoint below
-
On the larger breakpoint, set any margin you have left and right to 0 on the repeater ( This will cause the repeater to take the full space minus the padding )
-
Set your docking in a way that the element is centered.
-
Set the repeater to fixed sizing.
-
Go to the smaller desktop breakpoint and remove the padding.
Here’s a video showing the steps taken.
This way, you’ll reach the following result:
As for the size of the elements just before the tablet breakpoint, it takes some adjusting. You could reduce the padding / margin to give the repeater more space to work with to reach this, or you could set some min value to the images. This will cause them to overflow over the size of the item, so be mindful to not set this too large.
For this to happen, the images can’t be stretched to the item.
Hope this will help!
Best regards,
Martin
Thank you very much for all your effort.