No change on window resize. about salvattore HOT 24 CLOSED

Hey guys. The only reason I can think of is that you might not be using media queries the way Salvattore need them to be. If you take a look at the website, each media selector requires very precise min-width and max-width values. Let me quote that segment accordingly.

@media screen and (max-width: 480px){
    #grid[data-columns]::before {
        content: '1 .column.size-1of1';
    }
}

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

/* Again, you're free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }

I know it's a lil bit annoying but it makes the script process things faster and let you work with CSS your own way (besides this restriction).

Now, if you’re already using that format and it still doesn't work properly, please feel free to post a live example somewhere in the web where I can inspect.

Thank you,
R

from salvattore.

I'm having a similar issue. It sizes down ok, but when sizing back up, it doesn't re-calculate until I reach my largest media query point.

from salvattore.

Ahh, yep, that was it for me. Thanks!

from salvattore.

@tolrem I also found if you don't run it in a server environment it won't work. I tried just running my file from my local disk and I wasn't getting real-time resizing, but when running the same files on my local server, it works.

from salvattore.

Great! @tolrem let me know if that fixed it for you as well. I also just updated the website’s documentation to make this clearer. http://salvattore.com/

from salvattore.

@rnmp Just did a bit of digging, the issue is Chrome. It seems that line 145 "cssRules = stylesheet.sheet.cssRules || stylesheet.sheet.rules;" will return null when viewing locally in Chrome. Locally in Firefox it works - silly me for not cross-browser testing earlier.

After a bit of googling it seems there have been several bugs logged for Chrome regarding the stylesheet object on local disk. Eg: https://code.google.com/p/chromium/issues/detail?id=49001

Maybe another update for your doc might be needed? :)

from salvattore.

Weird, I even tried by just copying the example css, and it still doesn't work on resize. I tried running it on a local server and no chance either.
I've found another pluging that does what I needed, but I wish you good luck for salvatorre, it's good :)

from salvattore.

Thank you! Maybe for future improvements you can upload your code online so I can see what the problem is. Otherwise, good luck with your project as well.

from salvattore.

As soon as I'm done with my current project I'll try your plugin again and see if I can make it work and where the problem was :)

from salvattore.

After trying the recommendations on this thread, I was still not able to get the layout to change on window resize. Checking through some other issues lead to this about @imports and, after removing all @imports from my stylesheets, the resize worked.

Hopefully there will be a way around this without having to abandon using imports.

from salvattore.

We will find a way to allow @import eventually. Though using @import is not really advisable.

What I will do in the meantime is to include this information on the website.

from salvattore.

this should be pointed out in the documents maybe. that this won't work:

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

@media screen and (max-width: 480px){
    #grid[data-columns]::before {
        content: '1 .column.size-1of1';
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    #grid[data-columns]::before {
        content: '2 .column.size-1of2';
    }
}

well it "works" but you'll run into the resize issue.

from salvattore.

Seems like it doesn't play nice with Sass either, as it doesn't reshuffle content as browser resized, only on refresh.

@media screen and (max-width: 849px) {
  /* line 4, ../sass/_salvattore.sass */
  #section-content .grid-9 .view-content[data-columns]::before {
    content: "1 .column.size-1of1";
  }
}
@media screen and (min-width: 850px) {
  /* line 4, ../sass/_salvattore.sass */
  #section-content .grid-9 .view-content[data-columns]::before {
    content: "3 .column.size-1of3";
  }
}

from salvattore.

I just noticed that reponsive grid is not working when I open the HTML file from my local disk and I have to refresh in order to view responsive views.
But when I copy the files over to the webserver and open the same HTML file from there, it works and follows the browser window resize...

Though, no errors are logged in the console when I open it locally.

from salvattore.

What I found is using ::after without using [data-columns], in your css – it wont work.

So this will work:

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

But not this:

@media screen and (min-width: 769px) {
  &::before {
    content: '3 .column.size-1of3';
  }
}

from salvattore.

That's interesting @pudgereyem

@Dzoge Yeh that is correct, you just have to remember that on the local, it only seems to work on refresh.

Every time I got to use Salvattore, I rediscover this. Mind of a sieve.

from salvattore.

Running into this issue now - any help would be greatly appreciated: http://gcn.fcad.ryerson.ca

The data-columns attribute is not being updated on window resize. I've tried changing the css to match the example on the site, but that didn't work.

My css seems to work fine in this codepen, so it must be something else conflicting with the js?

Thanks in advance for your help.

from salvattore.

What I found is […] without using [data-columns], in your css – it wont work.

… confirming as well – thanks for the hint; maybe this should have been noted better in the doc*. You can still use & placeholders BTW, only also crediting the attribute like this:

@media screen and (min-width: 769px) {
  &[data-placeholder]:before {
    content: '3 .column.size-1of3';
  }
}

* ok, I guess you could't expect more than the note already existing:

with the [data-columns] attribute selector included, Salvattore relies on this

from salvattore.

I can't remember fully, but the JS calls data-columns to generate the additional markup?

Just copy and paste that HTML structure they provide, and everything should just work.

from salvattore.

Yep, I got it to work. Depending on your project your content needs to rely on additional markup though and it's nice to be able to iterate this via SASS. But everything's cool as long a s you include data-columns.

from salvattore.

i have the same problem, i did everything you say but i still have the problem
http://clientarea.spocstudio.com/@attiko_parko/elephants/asian_culture_en.html

from salvattore.

@aslanoglou: I suppose it's your default.css code in line 93, where you define the :before content outside of a media query, overriding the max/min settings – as @veteze notes, this doesn't work.

I can't change the code on your site to verify this, though.

from salvattore.

Hey guys, having the same problem here, the columns are not changing unless i reload the page - I'd appreciate any insight that can be given!

http://bowclub.co/en/shop

from salvattore.

its not working for size 1-2 when i reduce it to mobile size that is 468px

from salvattore.