Not responding to resize

[coreytegeler]

Shrinking the window resizes and redistributes everything perfectly. Then when I'm scaling it back up, the data-columns attribute isn't being updated, therefore the column size isn't changing either

everything works fine on the demo, so I believe I'm messing up, let me know if there is any code on my end you need to see. (I am loading the script right before the tag)

[mlukaszczyk]

Can you post your media queries?

For example:
(min-width: 300px) and (max-width: 600px)
(min-width: 600px) and (max-width: 900px)

This wouldn´t work for me. There has to be at least 1px difference between both queries.

so:
(min-width: 601px) and (max-width: 900px)

would work

[BenKingBBC]

He's right. Here's an example:

#grid[data-columns]::before {
  content: '2 .column.size-1of2'; }

@media screen and (min-width: 501px) {
  #grid[data-columns]::before {
    content: '3 .column.size-1of3'; } }

If you start the browser small, it'll start with 2 columns. Increase the browser width and it'll update to 3. Reduce the browser width again, and it doesn't revert to 2 - it sticks with 3.

[samuelrafo]

Same problem here. For some reason the resize does not work in Chrome. On Edge and Firefox works perfectly.

[Deleted user]

Cannot confirm this issue when using non-overlapping min-widths and/or max-withs like described by @LWA above.

[marcorieser]

Having the same issue here but not only in Chrome, Firefox is also not working properly.
When i resize the browser window or make an orientation change and the viewport width gets wider salvatorre updates correctly but when it gets smaller it fails.

.news-list-view [data-columns]::before {
    content: '1 .col-xs-12';
}

@media screen and (min-width: 480px)
    .news-list-view [data-columns]::before {
        content: '2 .col-ty-6';
    }
}

@media screen and (min-width: 992px)
    .news-list-view [data-columns]::before {
        content: '3 .col-md-4';
    }
}

[marcorieser]

As a quick fix we rescan the media queries on orientation change and resize with jQuery:

$(window).on('resize orientationchange', function () {
    if (window.salvattore !== undefined) {
        window.salvattore.rescanMediaQueries();
    }
});

[justinmetros]

I am working on a few sites with Salvattore, it's awesome. I have never been able to get the DOM to update the styles without using the resize event, though.

Hasn't been a big deal. Could be something with my build, not sure. But the above works well every time. Also commenting to keep track of this issue, because I'd love to cut down on resize event calls in teh future. No complaints though, great tool! Cheers to all the authors and contributors.