CODEWITHSUNDEEP
jqueryresponsive-designjquery-masonryinfinite-scrollcss-selectors
beefchimi
beefchimi

Reputation: 1308

jQuery Infinite Scroll + Masonry + CSS Media Queries + nth-child

I am having an unusual issue.

I am using both jQuery Masonry and Infinite Scroll on a website.

http://masonry.desandro.com/

http://www.infinite-scroll.com/

The site is also responsive, so at certain breakpoints (480px, 768px, etc.) I add some styles to change the order of the boxes using the nth-child selector. To elaborate, each masonry brick contains two squares, which get switched to the left or right depending on the screen size. So you would see something like this:

#main-content article:nth-child(2) .first,
#main-content article:nth-child(2n+8) .first {
    left: 0;
}
#main-content article:nth-child(2) .second,
#main-content article:nth-child(2n+8) .second {
    left: 15em; /* 240px / 16px = 15em */
}

The issue is, when Infinite Scroll pulls in my other posts, these nth-child styles do not get applied... leaving a very wonky looking design.

Is there anyway I can force Infinite Scroll to apply everything from my media queries? Is there perhaps a callback function that will allow me to either force Infinite Scroll to accept my nth-child styles or reload the styles.css?

Any help is greatly appreciated. Thanks,

Upvotes: 1

Views: 1200

Answers (1)

beefchimi
beefchimi

Reputation: 1308

Idiotic mistake on my part.

What was happening was, Infinite Scroll adds a #loading to the container... and since I was using nth-child and not nth-of-type... my styling was including that element.

All is well now.

Upvotes: 1

Related Questions