masonry.css — Strong Testimonials 3.3.2

strong-testimonials / assets / public / css / masonry.css

strong-testimonials / assets / public / css Last commit date

masonry.css

87 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 .wpmtst-testimonial {
14	margin-top: 0;
15	word-wrap: break-word;
16	}
17
18	/*----------------------------------------------------------
19	* default: 1 column
20	----------------------------------------------------------/
21	.strong-masonry .wpmtst-testimonial,
22	.strong-masonry .grid-sizer {
23	width: 100%;
24	}
25
26	.strong-masonry .gutter-sizer {
27	width: 0;
28	}
29
30	.strong-masonry .wpmtst-testimonial.grid-item--width2 {
31	width: 100%;
32	}
33
34	/*----------------------------------------------------------
35	* responsive
36	----------------------------------------------------------/
37	@media only screen and (min-width: 480px) {
38
39	/*----------------------------------------------------------
40	* 2 columns
41	----------------------------------------------------------/
42	.strong-masonry.columns-2 .wpmtst-testimonial,
43	.strong-masonry.columns-2 .grid-sizer {
44	width: 48.5%;
45	}
46
47	.strong-masonry.columns-2 .gutter-sizer {
48	width: 3%;
49	}
50
51	.strong-masonry.columns-2 .wpmtst-testimonial.grid-item--width2 {
52	width: 97%;
53	}
54
55	/*----------------------------------------------------------
56	* 3 columns
57	----------------------------------------------------------/
58	.strong-masonry.columns-3 .wpmtst-testimonial,
59	.strong-masonry.columns-3 .grid-sizer {
60	width: 31.33%;
61	}
62
63	.strong-masonry.columns-3 .gutter-sizer {
64	width: 3%;
65	}
66
67	.strong-masonry.columns-3 .wpmtst-testimonial.grid-item--width2 {
68	width: 62.66%;
69	}
70
71	/*----------------------------------------------------------
72	* 4 columns
73	----------------------------------------------------------/
74	.strong-masonry.columns-4 .wpmtst-testimonial,
75	.strong-masonry.columns-4 .grid-sizer {
76	width: 22.75%;
77	}
78
79	.strong-masonry.columns-4 .gutter-sizer {
80	width: 3%;
81	}
82
83	.strong-masonry.columns-4 .wpmtst-testimonial.grid-item--width2 {
84	width: 45.5%;
85	}
86	}
87