themeconfigurator hook home images alignment

[LucianoNapoli]

Hi, I have tried everything I know and found on the forum but can't make work well the alignment of the images on this homepage http://orzastudio.it/smartphone

 

What is the problem with the last 3 images don't display on the same line?

Please help me, have spent all day trying everything.

 

 

 

 

 

[jgamio]

Hi you use row and col but not container 

 

You need declarate a <div class="container"> outside row to take the right spaces

[LucianoNapoli]

Thanks jgamio, I've done the change you suggested but nothing has changed.

Have another idea?

[rocky]

I'm not familiar with that theme, so it's hard to help. I was able to fix your issue in Firebug by adding style="clear:left" to the fourth image.

 

It appears there's a module in that theme that adds <div class="htmlcontent_home"> and the code within it to the homepage. Find that module, edit it's TPL file and look for the {foreach} tag that displays those images. Make sure that tag has a name such as name="images", then add a line like the following inside the <li> tag:

{if $smarty.foreach.images.iteration % 3 == 1} style="clear: left"{/if}

If done correctly, this will cause style="clear:left" to be added to the first image of each row, which will cause them to line up properly.

[LucianoNapoli]

Thanks Rocky! That solution is right, now all images are aligned correctly.

The file to edit is /modules/themeconfigurator/views/templates/hook/hook.tpl

For me the right code (near row 34) is the next:

<li class="htmlcontent-item-{$smarty.foreach.items.iteration|escape:'htmlall':'UTF-8'} col-xs-4" {if $smarty.foreach.items.iteration % 3 == 1} style="clear: left"{/if}>

my collection name is "items" (do not forget the double = for comparison in %3)

 

Thank you so much!

Edited March 19, 2015 by LucianoNapoli (see edit history)