UL Rows

ul-rows.css

/* Repeating items (3 in a row)
-------------------------------------------------------------------------------------------------- */
ul.row-of-three {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	ul.row-of-three li {
		float: left;
		margin-right: 2%;
		margin-bottom: 15px;
		width: 32%;
	}
		ul.row-of-three li:nth-child(3n) {
			margin-right: 0;
		}

		@media screen and (max-width: 768px) {
			ul.row-of-three li,
			ul.row-of-three li:nth-child(3n) {
				width: 49%;
				margin-right: 2%;
			}
			ul.row-of-three li:nth-child(2n) {
				margin-right: 0;
			}
		}

		@media screen and (max-width: 600px) {
			ul.row-of-three li,
			ul.row-of-three li:nth-child(2n),
			ul.row-of-three li:nth-child(3n) {
				width: 100%;
				margin: 0 0 5% 0;
			}
		}



/* Repeating items (4 in a row) - Top Angebote
-------------------------------------------------------------------------------------------------- */
ul.row-of-four {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul.row-of-four > li {
    float: left;
    width: 23.8%;
    margin-right: 1.6%;
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }
      ul.row-of-four > li:nth-child(4n) {
        margin-right: 0;
      }

    @media screen and (max-width: 768px) {
      ul.row-of-four > li,
      ul.row-of-four > li:nth-child(3n) {
        width: 49%;
        margin-right: 2%;
      }
      ul.row-of-four > li:nth-child(2n) {
        margin-right: 0;
      }
    }

    @media screen and (max-width: 600px) {
      ul.row-of-four > li,
      ul.row-of-four > li:nth-child(2n),
      ul.row-of-four > li:nth-child(3n) {
        width: 100%;
        margin: 0 0 5% 0;
      }
    }