Moved image_grid.css content to global.css and use unique class names for imagegrid style classes, removed id for div
This commit is contained in:
parent
86b9cef273
commit
8690b311a8
3 changed files with 36 additions and 33 deletions
|
@ -680,3 +680,33 @@ span.required {
|
||||||
audio {
|
audio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Image grid settings START
|
||||||
|
**/
|
||||||
|
.imagegrid-row {
|
||||||
|
display: -ms-flexbox; /* IE10 */
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap; /* IE10 */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create four equal columns that sits next to each other */
|
||||||
|
.imagegrid-column {
|
||||||
|
-ms-flex: 50%; /* IE10 */
|
||||||
|
flex: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
padding: 0 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imagegrid-column img {
|
||||||
|
margin-top: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Image grid settings END
|
||||||
|
**/
|
|
@ -1,12 +1,10 @@
|
||||||
<link rel="stylesheet" href="view/theme/frio/css/image_grid.css" type="text/css" media="screen"/>
|
<div class="imagegrid-row">
|
||||||
|
<div class="imagegrid-column">
|
||||||
<div id="row" class="row">
|
|
||||||
<div class="column">
|
|
||||||
{{foreach $columns.fc as $img}}
|
{{foreach $columns.fc as $img}}
|
||||||
{{include file="content/image.tpl" image=$img}}
|
{{include file="content/image.tpl" image=$img}}
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="imagegrid-column">
|
||||||
{{foreach $columns.sc as $img}}
|
{{foreach $columns.sc as $img}}
|
||||||
{{include file="content/image.tpl" image=$img}}
|
{{include file="content/image.tpl" image=$img}}
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
|
|
|
@ -1,25 +0,0 @@
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: -ms-flexbox; /* IE10 */
|
|
||||||
display: flex;
|
|
||||||
-ms-flex-wrap: wrap; /* IE10 */
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Create four equal columns that sits next to each other */
|
|
||||||
.column {
|
|
||||||
-ms-flex: 50%; /* IE10 */
|
|
||||||
flex: 50%;
|
|
||||||
max-width: 50%;
|
|
||||||
padding: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column img {
|
|
||||||
margin-top: 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
Loading…
Reference in a new issue