Вибачте, сайт на реконструкції

111

Галерея на CSS

.container {
width: 80%;
margin: 30px auto;
overflow: hidden;
}

.container ul li {
list-style:none;
float: left;
font: 10px/1.5 Verdana, Helvetica, Sans-serif;
width: 16%;
margin: 2% 2% 40px 2%;
}

.container ul li a {
color: #5d5f5d;
}

.container ul li a img {
max-width: 100%;
}

/* 100% - (5 * 4%) = 80% */
/* 80%/5 = 16% */

/* 100% - (4 * 4%) = 84% */
/* 80%/4 = 21% */

/* Media Queries */
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){

.container ul li {
width: 21%;
}
}

/* 100% - (3 * 4%) = 88% */
/* 88%/3 = 29.33333% */

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){

.container ul li {
width: 29.33333%
}
}

/* 100% - (2 * 4%) = 92% */
/* 92%/2 = 46% */

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
.container ul li {
width: 46%
}
}

/* 100% - 4% = 96% */
/* 96% */

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.container ul li {
width: 96%
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.container {
width: 80%;
margin: 30px auto;
overflow: hidden;
}

.container ul li {
list-style:none;
float: left;
font: 10px/1.5 Verdana, Helvetica, Sans-serif;
width: 16%;
margin: 2% 2% 40px 2%;
}

.container ul li a {
color: #5d5f5d;
}

.container ul li a img {
max-width: 100%;
}

/* 100% - (5 * 4%) = 80% */
/* 80%/5 = 16% */

/* 100% - (4 * 4%) = 84% */
/* 80%/4 = 21% */

/* Media Queries */
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){

.container ul li {
width: 21%;
}
}

/* 100% - (3 * 4%) = 88% */
/* 88%/3 = 29.33333% */

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){

.container ul li {
width: 29.33333%
}
}

/* 100% - (2 * 4%) = 92% */
/* 92%/2 = 46% */

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
.container ul li {
width: 46%
}
}

/* 100% - 4% = 96% */
/* 96% */

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.container ul li {
width: 96%
}
}