nth-child "collisions" in a responsive design / creating a fluid grid

css, css-selectors, fluid-layout, responsive-design

Solution

By using negative margins on a parent element, you can be responsive without needing media queries:

http://codepen.io/cimmanon/pen/dwbHi

.gallery {
  margin: -10px 0 0 -10px;
  overflow: hidden;
}

.gallery img {
    margin: 10px 0 0 10px;
    float: left;
}

Problem

I have a grid system for my site which was initially set up with a style applied to every sixth item in a grid ``` li:nth-child(5n+1){ margin-left:0 } ``` I'm in the process of making my site responsive, and I have a breakpoint where I specify ``` li:nth-child(3n+1){ margin-left:0 } ``` But the problem is that it is still interpreting the previous style of 5n+1, which I don't want. How do I tell CSS to ignore that style. Or better yet, how do I create a fluid grid so that whenever an li item is the first in a row, it has a margin-left of 0, and all others have a margin of, say, 25px?

Original source

Related problems