Commit 480f6081 authored by Naomi Guyer's avatar Naomi Guyer Committed by Aaron Wells

BUG: Fix equal width 3 col layout (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I297b34774b0c5bf56fe9ba0081e10c504ac8cfe1
parent 982916f1
......@@ -6,58 +6,63 @@
$columns: 8; //up to 8
@for $i from 1 through $columns {
.columns#{$i} {
width: 100 / $i - 2%;
}
.columns#{$i} {
width: 100 / $i - 2%;
}
}
.column-content {
min-height: 50px;
min-height: 50px;
}
.col-row,
.row-content {
padding-bottom: 50px;
padding-bottom: 50px;
.column .post,
.column-layout .post {
padding: 0;
}
.column .post,
.column-layout .post {
padding: 0;
}
}
.column {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
vertical-align: top;
float: left;
margin: 0;
padding: 0 0.9% 10px 0.9%;
max-width: 98%;
position: relative;
&:first-child {max-width: 98%;
padding-left:0;
}
&:last-child {
padding-right:0;
}
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
vertical-align: top;
float: left;
margin: 0;
padding: 0 0.9% 10px 0.9%;
max-width: 98%;
position: relative;
&:first-child {max-width: 98%;
padding-left:0;
}
&:last-child {
padding-right:0;
}
}
.column-layout {
max-width: 98%;
float: left;
@media (min-width: $screen-sm-min + 1) {
margin-left: 2%;
}
@media (max-width: $screen-sm-min) {
width: 100% !important; // override inline style
}
max-width: 98%;
float: left;
@media (min-width: $screen-sm-min + 1) {
margin-left: 2%;
}
@media (max-width: $screen-sm-min) {
width: 100% !important; // override inline style
}
}
// Target all 3 col layouts with equal width
.column-layout.columns3.col-width-33 {
width: 31.3% !important; // override inline style with a more accurate width
}
.row-content {
@media (min-width: $screen-sm-min + 1) {
margin-left: -2%;
}
@media (min-width: $screen-sm-min + 1) {
margin-left: -2%;
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
<div id="row_{$row}_column_{$column}" class="column column-layout columns{$numcolumns}{if $column == 1} firstcolumn{/if}{if $column == $numcolumns} lastcolumn{/if}" {if $width}style="width:{if $width == 100} {$width }%;{$width - 2}%;{/if}"{/if}>
<div id="row_{$row}_column_{$column}" class="column column-layout columns{$numcolumns}{if $column == 1} firstcolumn{/if}{if $column == $numcolumns} lastcolumn{/if} {if $width}col-width-{$width}{/if}" {if $width}style="width:{if $width == 100}{$width }%;{else}{$width - 2}%;{/if}"{/if}>
{if $addremovecolumns}
<div class="btn-header btn-group mbl {if $column == 1}btn-three{else}btn-two{/if}">
{if $column == 1}
......
<div id="row_{$row}_column_{$column}" class="column-layout columns{$numcolumns}{if $column == 1} first{/if}{if $column == $numcolumns} last{/if}" {if $width}style="width:{if $width == 100} {$width}%;{else}{$width - 2}%;{/if}"{/if}>
<div id="row_{$row}_column_{$column}" class="column-layout columns{$numcolumns}{if $column == 1} first{/if}{if $column == $numcolumns} last{/if} {if $width}col-width-{$width}{/if}" {if $width}style="width:{if $width == 100} {$width}%;{else}{$width - 2}%;{/if}"{/if}>
<div class="column-content">
{$blockcontent|safe}
</div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment