Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Urgent: Taste Theme Masonry Bug in Desktop Chrome and Safari

  • #3138
    Avatar photo[anonymous]

    When I set Masonry 3 columns in Taste theme, it is perfect on mobiles with one column. On desktop, firefox is perfect with 3 columns. On Chrome (both mac and windows) there is only one column. The second post goes below the first post even though 3 columns is on. And on Safari there is an even more strange behavior. The second post is still showing in the same row but invisible and only becomes visible on mouseover. Seems there are some issues with the Chrome engine and Webkit in Safari.

    Your Taste demo is Grid not Masonry I think so this bug is not there in it. The Grid 3 columns works fine on desktops with no above problems like in Masonry. But the problem is that in Taste Grid layout instead of showing the correct single column for mobiles like in Taste Masonry and Mercury Grid, it shows 2 columns on mobile which renders the whole layout so squeezed and the featured images cut. So I am neither able to use Masonry or Grid for the Taste theme.

    The above Taste bug is there after I removed my Custom css and resetted my theme settings. I have the latest and stable versions of the theme, publii, OSes, browsers etc.

    I could move to the Mercury theme which correctly shows a single column on mobiles for Grid 3 layout but I have done a lot of custom css for Taste and Taste is your most updated theme.

    I am sorry I can’t show you the url because it is a private site. But I am sure you can reproduce this at your end for Masonry in Taste theme for desktop chrome and safari. If you can’t reproduce it, I will make a public site and show you. So please please fix this one.

    #3146
    Avatar photo[anonymous]

    I fixed the above Masonry 3-column problem for the Taste theme in Chrome and Safari on desktop with this url for the time being till you fix:

    @media screen and (min-width: 1024px) {
       div.l-masonry.l-masonry--3 {
          display: flex;
       }
    }
    @media screen and (max-width: 1023px) {
       .l-masonry--3 {
          -webkit-column-count: 1;
             -moz-column-count:1;
                  column-count:1;
       }
    }