# Kirby Online Demo, Portfolio example — Strange behavior in Chrome Browser (Mac)

**URL:** <https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596>\
**Category:** Questions\
**Tags:** v3\
**Created:** [May 27, 2022, 5:26pm UTC](https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596 "2022-05-27T17:26:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![moritzschell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moritzschell/32/11945_2.png) [@moritzschell](https://forum.getkirby.com/u/moritzschell)\
**Post date:** [May 27, 2022, 5:26pm UTC](https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596/1 "2022-05-27T17:26:20Z")

</div>

Hi.

I’m not sure if the question is directly kirby related, but I found a strange behavior within the _instant online demo_ displayed in chrome browser.  
I wanted to achieve sth. similar to the instant online demo – **portfolio example** ([Try | Kirby CMS](https://getkirby.com/try) – Instant Online Demo). It works fine in Safari, but when I open the example in Chrome the image grid on the right side is stacked strangely (see screenshots). When I reload the site it displays perfectly. When I resize the browser the strange stacking appears again. After reloading it displays in perfect order again.

Has anyone experienced the same with the Instant online demo or can reproduce the behavior?  
Does anyone have an idea, how to fix it?

System: MacOS 12.3.1  
Browser: Chrome Version 102.0.5005.61

Any help or ideas highly appreciated… Thanks!

That’s the corresponding code for the example found on GitHub:

Template:

```auto
<article>
    <h1 class="intro"><?= $page->title()->escape() ?></h1>

    <div class="grid">

        <div class="column text" style="--columns: 4">
            <?= $page->text()->kt() ?>
        </div>

        <div class="column" style="--columns: 8">
            <ul class="portfolio-project-gallery">
                <?php foreach ($page->images()->sortBy('sort') as $image) : ?>
                    <li>
                        <a href="<?= $image->url() ?>" data-lightbox>
                            <figure class="img" style="--w:<?= $image->width() ?>;--h:<?= $image->height() ?>">
                                <?= $image->resize(800) ?>
                            </figure>
                        </a>
                    </li>
                <?php endforeach ?>
            </ul>
        </div>
    </div>

</article>

```

Css:

```auto
.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.grid > .column {
  margin-bottom: var(--gutter);
}

.portfolio-project-gallery {
  line-height: 0;
  columns: 1;
  column-gap: 1.5rem;
}

.portfolio-project-gallery li {
  display: block;
  margin-bottom: 1.5rem;
  break-inside: avoid;
}

@media screen and (min-width: 60rem) {
  .portfolio-project-gallery {
    columns: 2;
  }
}

```

**strange behavior when loading page in chrome:**

 ![Bildschirmfoto 2022-05-27 um 18.53.59](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/3/3b051bb8cc1b4a9892967b6cb3cd901cdd958881.jpeg)

_(looks perfect when refreshing the page._  
_Looks strange again when resizing…_  
_looks perfect again on refresh…)_

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 27, 2022, 5:39pm UTC](https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596/2 "2022-05-27T17:39:04Z")

</div>

Seems to be an issue with Chrome. I first tested with the Chrome version I had installed (101.xxx something), where this didn’t happen. Then I noticed you had a newer version and updated my Chrome, and voilá, I can reproduce it.

---

<div class="post-metadata">

**Author:** ![moritzschell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moritzschell/32/11945_2.png) [@moritzschell](https://forum.getkirby.com/u/moritzschell)\
**Post date:** [May 27, 2022, 6:02pm UTC](https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596/3 "2022-05-27T18:02:55Z")

</div>

Hey. Thanks a lot @texnixe for the fast reply and for testing (and reproducing)… Do you have by any chance an idea if there might be a nifty workaround to fix this within the current chrome version? If not I’m hoping for the next update of the chrome browser 🤞 😉

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 27, 2022, 6:29pm UTC](https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596/4 "2022-05-27T18:29:44Z")

</div>

Seems to be a problem with columns, see also: [Chrome broke my CSS/HTML with Version 102.0.5005.61 - Stack Overflow](https://stackoverflow.com/questions/72406110/chrome-broke-my-css-html-with-version-102-0-5005-61)

---

<div class="post-metadata">

**Author:** ![moritzschell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moritzschell/32/11945_2.png) [@moritzschell](https://forum.getkirby.com/u/moritzschell)\
**Post date:** [May 27, 2022, 7:06pm UTC](https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596/5 "2022-05-27T19:06:35Z")

</div>

Thanks a lot for the hint! I’ll give it a try asap…

---

<div class="post-metadata">

**Author:** ![moritzschell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/moritzschell/32/11945_2.png) [@moritzschell](https://forum.getkirby.com/u/moritzschell)\
**Post date:** [May 30, 2022, 8:47am UTC](https://forum.getkirby.com/t/kirby-online-demo-portfolio-example-strange-behavior-in-chrome-browser-mac/25596/6 "2022-05-30T08:47:13Z")

</div>

Getting rid of the `display: block;` property seems to fix it…  
Thanks again @texnixe for the hint!