Question

I use this code to remove the margin of the third element (the thumbnails):

$j('.project:nth-child(3n)').addClass('odd-element');

I started to use media queries to make the site mobile ready but I got this problem:

When the screen stretches, the class no longer needs to be applied to the third element but to the second element:

Is there any way of modify the jQuery code above to say something like: apply the class tot he last element on the right?

Answer 1

Do you want to do this with JS, no mater what?

I would do it like this:

.project { float:left;margin-left:20px }
.projectParent { margin-left:-20px }

There you go. Instead of adding right margins, just add left margins and move the container few px to the left.

No js involved!

// edit: oh, yeah, and you get rid of all flexible box issues!