Special module with 1 column more in the bottom position 1

The special module in the bottom position 1 has two columns. I would like to know the code to have 3 columns. This is because I put the pictures int the module, and now is too long.

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

the site is:
http://www.consolinihotels.com/eden2015/

many thanks.

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi

Ok. But I thought You will have this 3rd column added already. I do not know in what format You would like to have it. so cannot tell what code to use to make it as a 3rd column. Right now this code determine widths for elements here:

Code: Select all

.gk-special figure {
    width: 35%;
}

.gk-special-content {
    width: 65%;
}


I solved this way. It fits well?

Code: Select all

<<div cl<div class="bigtitle gk-special">
<figure data-scroll-reveal="enter left over .5s"><img src="images/media/foto_homepage/spiaggia-e-piscina/Piscina_riscaldata_hotel_Eden.jpg" alt="Piscina riscaldata panoramina sul lago di garda" /> <figcaption data-scroll-reveal="enter bottom over .5s after .5s">
<h3><span>Spiaggia e</span>Piscina</h3>
<small>a una temperatura di <strong>27 gradi</strong></small> </figcaption></figure>
<div class="gk-special-content" style="padding-top: 10px; padding-left: 50px; padding-right: 50px;"data-scroll-reveal="enter right over .5s" style="padding-top: 10px;">
<h3 class="header" style="margin-left: 0px; margin-right: 0px;"><small style="margin-bottom: 10px; margin-top: 10px;">Spiaggia privata e Piscina Riscaldata metà coperta e metà scoperta</small></h3>
<ul class="gk-special-menu">
<div style="float: left; width: 33%"><li data-scroll-reveal="enter bottom over .25s after .5s" style="float: left; width: 119%">
<h4>Piscina Scoperta</h4>
<strong><img alt="Panoramica serale Piscina piccola" src="images/media/foto_homepage/spiaggia-e-piscina/Panoramica_serale_Piscina_piccola.jpg" /></strong></li></a></div>
<div style="float: left; width: 33%"><li data-scroll-reveal="enter bottom over .25s after .8s" style="float: left; width: 119%">
<h4>Piscina Coperta</h4>
<strong><img alt="Piscina interna riscaldata coperta p" src="images/media/foto_homepage/spiaggia-e-piscina/Piscina_interna_riscaldata_coperta_p.jpg" /></strong></li></div>
<div style="float: left; width: 33%"><li data-scroll-reveal="enter bottom over .25s after .6s" style="float: left; width: 119%">
<h4>Spiaggia Privata</h4>
<strong><img alt="Spiaggia eden p" src="images/media/foto_homepage/spiaggia-e-piscina/Spiaggia_eden_p.jpg" /></strong></li></div>
<div style="float: left; width: 33%"><li data-scroll-reveal="enter bottom over .25s after .9s" style="float: left; width: 119%">
<h4>Idro-massaggio</h4>
<strong><img alt="idromassaggio p" src="images/media/foto_homepage/spiaggia-e-piscina/idromassaggio_p.jpg" /></strong></li></div>
<div style="float: left; width: 33%"><li data-scroll-reveal="enter bottom over .25s after .7s" style="float: left; width: 119%">
<h4>Solarium UVB</h4>
<strong><img alt="Spiaggia eden p" src="images/media/foto_homepage/spiaggia-e-piscina/Spiaggia_eden_p.jpg" /></strong></li></div>
<div style="float: left; width: 33%"><li data-scroll-reveal="enter bottom over .25s after 1s" style="float: left; width: 119%">
<h4>Sauna Finlandese</h4>
<strong><img alt="sauna" src="images/media/foto_homepage/spiaggia-e-piscina/sauna.jpg" /></strong></li></div>
</ul>
</div>
</div>
<p><a style="margin-top: -13px;" href="#" class="gk-special-link button">More details</a></p>

Hi

If it works than it has to be good Just the beginning of this code "<<div" You may need to remove this extra "<" sign.