masonry.css — Strong Testimonials 3.3.6

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

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

masonry.css

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