NO BUG: Loop 'Not Found' Section does not respond correctly on smaller screens

Bugs
1

Browser: Chrome, Edge or Safari
OS: macOS and Windows
URL: Veranstaltungen – Stadt Hohenems
Video:

  1. Jam

  2. https://jam.dev/c/b571cd04-a09a-4014-9dd5-92b1a6fc7cbe

I’d like to report an issue with the “Not found” section when using Loops.

Here’s the behavior I’m seeing:

When I assign a Section as the “Not found” layout for a Loop, everything works fine on desktop view. However, as soon as the screen size gets smaller (tablet/mobile), this “Not found” section no longer adapts responsively and overflows beyond the viewport (goes past the screen edge).

The rest of the layout behaves responsively as expected — only the “Not found” section inside the Loop seems to ignore responsive constraints once the breakpoint changes.

Steps to reproduce:

  1. Create a Loop.

  2. Assign a Section as the “Not found” content.

  3. View on desktop → looks correct.

  4. Reduce screen size (tablet/mobile) → the “Not found” section overflows and is not constrained to the viewport.

Is this a known issue, or is there a recommended way to make the Loop “Not found” section fully responsive across breakpoints?

Thanks in advance for your help.

Best regards,

Simon

2

Hi Simon,
Thanks so much for your report!

Unexpected overflows can always occur within simply defined CSS grids. What happens if you use minmax(0, 1fr) (more robust) instead of 1fr (simple) for your grid-template-columns? In most cases, this will fix this type of problem.

image
image1126×706 97.8 KB

Best regards,
timmse

3

Hi timmse,

thank you for the quick reply and the helpful suggestion!

Using minmax(0, 1fr) instead of 1fr solved the issue — the “Not found” section now behaves responsively across all screen sizes.

Thanks a lot for your support!

Best regards,

Simon

4

Great, I’m glad it was so easy to solve! As I said, the minmax function is much more robust :flexed_biceps: