3 columns on frontpage

Hi
using the Creativity template, how can I get a 3 column layout in the mainbody position, with a Custom HTML module?

Thank you.

Hello,

Please add the following code at the end of css/gk.stuff.css file:

Code: Select all

/* Columns in the content */
.gkColumns {
   margin: 0 -10px;
   overflow: hidden;
   width: auto;
}
.gkColumns > div {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding: 0 10px;
}
.gkColumns[data-cols="2"] > div { width: 50%; }
.gkColumns[data-cols="3"] > div { width: 33.333333%; }
.gkColumns[data-cols="4"] > div { width: 25%; }
.gkColumns[data-cols="5"] > div { width: 20%; }
.gkColumns[data-cols="6"] > div { width: 16.666666%; }

Then you will be able to use the following code in the Custom HTML module:

Code: Select all

<div class="gkColumns" data-cols="X">
<div>
// … column content
</div>
...
</div>

Thank you very much

Hi
This works very well, but is there any way of making it responsive as well,?
Thanks.

Yes, it is possible - you have to just prepare proper media queries. In example:

Code: Select all

/* Small tablet view */
@media (max-width: 800px) {
.gkColumns[data-cols="2"] > div { width: 50%; }
.gkColumns[data-cols="3"] > div { width: 33.333333%; }
.gkColumns[data-cols="4"] > div { width: 50%; }
.gkColumns[data-cols="5"] > div { width: 50%; }
.gkColumns[data-cols="6"] > div { width: 50%; }
}

/* Mobile phones */
@media (max-width: 500px) {
.gkColumns > div { clear: both; }
.gkColumns[data-cols="2"] > div { width: 100%; }
.gkColumns[data-cols="3"] > div { width: 100%; }
.gkColumns[data-cols="4"] > div { width: 100%; }
.gkColumns[data-cols="5"] > div { width: 100%; }
.gkColumns[data-cols="6"] > div { width: 100%; }
}