masonry.css — Strong Testimonials 2.33

strong-testimonials / public / css / masonry.css

strong-testimonials / public / css Last commit date

masonry.css

86 lines

1	/**
2	* To add Masonry to any template.
3	*
4	* Element sizing for responsive layouts with percentage widths.
5	* 2 columns --> 2 x grid-sizer + 1 x gutter-sizer = 100%
6	* 3 columns --> 3 x grid-sizer + 2 x gutter-sizer = 100%
7	* 4 columns --> 4 x grid-sizer + 3 x gutter-sizer = 100%
8	*/
9
10	/*----------------------------------------------------------
11	* global tweaks
12	----------------------------------------------------------/
13	.strong-content.strong-masonry .testimonial {
14	margin-top: 0;
15	}
16
17	/*----------------------------------------------------------
18	* default: 1 column
19	----------------------------------------------------------/
20	.strong-masonry .testimonial,
21	.strong-masonry .grid-sizer {
22	width: 100%;
23	}
24
25	.strong-masonry .gutter-sizer {
26	width: 0;
27	}
28
29	.strong-masonry .testimonial.grid-item--width2 {
30	width: 100%;
31	}
32
33	/*----------------------------------------------------------
34	* responsive
35	----------------------------------------------------------/
36	@media only screen and (min-width: 480px) {
37
38	/*----------------------------------------------------------
39	* 2 columns
40	----------------------------------------------------------/
41	.strong-masonry.columns-2 .testimonial,
42	.strong-masonry.columns-2 .grid-sizer {
43	width: 48.5%;
44	}
45
46	.strong-masonry.columns-2 .gutter-sizer {
47	width: 3%;
48	}
49
50	.strong-masonry.columns-2 .testimonial.grid-item--width2 {
51	width: 97%;
52	}
53
54	/*----------------------------------------------------------
55	* 3 columns
56	----------------------------------------------------------/
57	.strong-masonry.columns-3 .testimonial,
58	.strong-masonry.columns-3 .grid-sizer {
59	width: 31.33%;
60	}
61
62	.strong-masonry.columns-3 .gutter-sizer {
63	width: 3%;
64	}
65
66	.strong-masonry.columns-3 .testimonial.grid-item--width2 {
67	width: 62.66%;
68	}
69
70	/*----------------------------------------------------------
71	* 4 columns
72	----------------------------------------------------------/
73	.strong-masonry.columns-4 .testimonial,
74	.strong-masonry.columns-4 .grid-sizer {
75	width: 22.75%;
76	}
77
78	.strong-masonry.columns-4 .gutter-sizer {
79	width: 3%;
80	}
81
82	.strong-masonry.columns-4 .testimonial.grid-item--width2 {
83	width: 45.5%;
84	}
85	}
86