WIP: Using Image Sources with an extra Custom Breakpoint (max/min width breakpoints)

Bugs
1

Hi, I added one custom breakpoint (I set it to 1890px at the moment). The purpose is to deliver sharper page hero images on large, high-density screens (4K and up). For that I use the maximum available standard resolution in WP (2560px).

My base resolution is Desktop. I don’t do mobile-first. The extra breakpoint is Desktop XL.

So far, so good. I don’t mean background images but < img > with customized sources. It works fine with all sources below the base breakpoint. In the source I get: <source media="(max-width: 991px)"> or other breakpoints. Great.

But for Desktop XL, I would expect <source media="(min-width: 1890px)">. But instead, in the page source I also get max-width: 1890px, which means the rule will never work as intended. The XL resolution will not be loaded on XL screens.

I set the sources starting from the lowest resolution and going up. As recommended in the UI.

Am I missing something?

Greetings,

Tom

2

Actually, now I think the base breakpoint in my scenario should get something like <source media="(max-width: 1889.9px)">, so that it is skipped on larger screens.

3

Hi Tom,
Thanks so much for your report!

I can replicate the problem and have added it to the internal bug tracker. We will update this thread as soon as it is fixed.

Instead of selecting the breakpoint, you can add a “custom” source and add the min-width there. Make sure it’s above the “default/base” breakpoint source, and it should work as expected.

Best regards,
timmse

image
image596Ă—1266 151 KB

1 Like
4

Thank you very much, timmse. Somehow I did not realize custom media queries were possible there. It works in my scenario.