Is pages image size relative to column size?

Kirby 3 Solved ✅
1

Hello, please look at this panel layout

image
image1477×811 153 KB

As you see the size of the pages on the pages section at left and right differ, although they should be the same as per the blueprint:

columns:
  - width: 2/3
    sections:
      products:
        type: pages
        headline: Products
        templates: product
        status: all
        sortable: true
        layout: cards
        size: tiny
        image:
          cover: true
          ratio: 2/3
  - width: 1/3
    sections:
      merchandise:
        type: pages
        headline: Merchandise
        templates: merch-product
        status: all
        sortable: true
        layout: cards
        size: tiny
        image:
          cover: true
          ratio: 2/3

Why is this? is the image size relative to the column size? is there are typo in the bp?

Thank you

2

That depends on the screen width.

test
test1611×676 1.03 MB

3

Oh… I see, so the column is supposed to fit a number of images, without leftovers, right ?

Well that is annoying in equal to proportion to one’s neuroticisim haha.

Thank you texnixe

4

No, if there is just one page and the screen is wide enough, it looks like this:

Bildschirmfoto 2020-03-18 um 18.51.03
Bildschirmfoto 2020-03-18 um 18.51.033252×1352 239 KB

But since it is responsive, when the column get’s smaller, the card start to fill up the whole column.

5

Yes, but I mean it seems to always try that the column width is cleanly divisible by the image width, right ? that is why the difference in column width causes the responsiveness to behave differently, different timing.

6

If you want a different behavior, you could use a custom Panel stylesheet.

1 Like