Masonry style behave differently in Chrome vs Firefox

  • I have masonry style activated with 3 posts (cards).
    I have an issues that the responsive behaviour is different depending on the browser.
    As an example in Firefox 3 columns will be displayed on a screen with resolution 1366×768. But in Chrome only 2 cols are displayed and there is a large empty space to the right of the second column (it looks as though the third card should have fitted right into that space, but instead it is stacked below)

    Another odd behaviour in Chrome is that for a display 1680×1050 only one column is shown and cards are stacked on-top of eachother (like as if it was a screen-size of a mobile). The result is that the cards then get enormously large.

    When I test the responsivness in different screen-sizes (in Chrome) there seem to be certain sizes where the columns do not display nicely and the white space to the right of the column increases until the number of columns are reduced due to screen-width.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter lisaesberg

    (@lisaesberg)

    Could this perhaps have something to do with the version of Bootstrap 4?

    Theme Author cafeserendipity21

    (@cafeserendipity21)

    Hello Lisa,
    sorry for the late answer, but even me have sometimes holidays, which means no computers ??
    So, I’ve tested your problem and I think it has something todo with the number of your posts and primarily with the Bootstrap version, so you where right.

    Quicksand still uses the Bootstrap-alpha version, but I won’t update the code, unless there’s a stable version, because it’s a lot of work to change it.

    The masonry-style isn’t a real one, like many JS-libraries offer. Basically it is a simple CSS-layout from Bootstrap (see) and the cards are ordered from top to bottom and not left to right. Apparently Bootstrap includes some CSS, which acts differently on some browser. That’s not a bug of the WP-theme, it’s just the CSS-framework.
    If you add more posts, your page will fill up and you won’t register the different breakpoints anymore.

    So, there’s nothing you can do about it right now, except for adding more post

    ??

    Thread Starter lisaesberg

    (@lisaesberg)

    Holiday ??

    I saw that you used Bootstrap 4 Alpha, and since I found some topics covering this issue (and it appeared to be solved in the Beta version. I my self, tried to replace the version. So I changed the js file to beta, but then I realized that the bootstrap CSS did not appear to be separate from your theme, so I couldn’t really figure out which CSS part to update.
    When do you think you will prioritize this? Considering Google Chrome being a commonly used browser?

    Best regards,
    Lisa

    Theme Author cafeserendipity21

    (@cafeserendipity21)

    Hello Lisa,
    as I said, the fixes won’t be done in a day. It’s not just the renaming of css-classes, you have to make changes inside the js- & php-scripts as well. I have some other projects running and not to forget I have to go to work as well ?? So, to answer your question, it won’t happen this year anymore, I am sorry ??
    Surely in the beginning of the next one …

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Masonry style behave differently in Chrome vs Firefox’ is closed to new replies.

Tags