horizontalLoop() with variable width

[Thomas Günther]

Hey there 👋

 

I'm currently using the great horizontalLoop() helper function in a project. It worked great until I introduced different/variable widths. Now it seems like the gap between the elements is not calculated correctly anymore. I've also attached a screenshot of the different gaps.

 

To be honest I don't understand 100% of what's going on in the helper function. Is it even possible to use it with variable widths? I've found tons of threads in the forums but none of them have variable widths.

 

Thanks for a nudge in the right direction,
Thomas

 

See the Pen BaVzYNE by medienbaecker (@medienbaecker) on CodePen

[mvaneijgen]

Is it me or does it seem like a .5rem issue?  I've made it a fixed 30px pixels with a spacer .box that is also 30px and they all seem to be the same.

 

See the Pen MWXeQNE by mvaneijgen (@mvaneijgen) on CodePen

[Thomas Günther]

3 minutes ago, mvaneijgen said:

Is it me or does it seem like a .5rem issue?

I don't think so. I can reproduce it with pixel values, too. The lower the more noticeable it seems.

 

See the Pen xxzOWxy by medienbaecker (@medienbaecker) on CodePen

[mvaneijgen]

Just guessing, maybe something with box-sizing. Is there a Flex gap box-sizing property that also calculates the gap? The function states it uses  xPercent and if the gap isn't included in that you would get weird results 

 

Here is an example with padding-left, I'm scared to say it, but it looks ok ... 😱   

See the Pen GRGqxNp by mvaneijgen (@mvaneijgen) on CodePen

[Thomas Günther]

You're absolutely right. It works with padding-left

It felt a bit weird to add padding to img elements so I tried margininstead. Doesn't work though 😅

 

I'll just go with padding and a wrapper element because it seems to work just fine. Thank you very much 👏