Theme Configurator Need Help!

[wide-eyed]

Using the default theme, I have added another row of images (hooked to home) in the theme configurator.  That was easy enough.  Here's the issue, the images no longer align themselves properly in each row. For example, in the first row I have three images, in the second two images and a blank space (where the image should be...but isn't), in the third row three images where there should be two.  How do I fix this?  I have dragged images around, changed sizes etc.  All to no avail.....! 

[selectshop.at]

You should also change the col class - col-xs-4 to 6 for ex. (on your theme /css/global.css

 

For spacing perhaps this topic helps you: https://www.prestashop.com/forums/topic/324875-column-spacing/

 

how to add more columns: https://www.prestashop.com/forums/topic/316622-how-to-add-more-columns-to-product-list-on-ps-16/

 

how to modifiy theme configurator: https://www.prestashop.com/forums/topic/348730-solvedps1609-how-to-modify-theme-configurator-at-homepage/

[wide-eyed]

@selectshop, thanks for pointing me in the right direction!  Still had to do some experimenting and finally found the solution.  Note: this is for modifying the default template only!  If you want to add another row of images along the bottom in the theme configurator, to have them align properly there are actually two methods:

First, if you want ALL images to be the same width across all rows then delete this snippet of code;

#htmlcontent_home ul li.htmlcontent-item-5 {

      width: 66.6667%; }

      @media (max-width: 479px) {

        #htmlcontent_home ul li.htmlcontent-item-5 {

          width: 100%; } }

 

From:  modules/themeconfigurator/css/hooks.css, line15

 

However, if you want to have the very bottom row split to two images of different sizes (like the original default of one image equalling a width of 777 and the other 383) then don't delete the above piece of code but modify the item number.  For example, in the above code the 5th image is item 5 but if you add a row of three more images this item number becomes item-8 (representing the eight image).  With this done all images will align properly once again!  Snoopy happy dance! So then your code will now look like this:

#htmlcontent_home ul li.htmlcontent-item-8 {

      width: 66.6667%; }

      @media (max-width: 479px) {

        #htmlcontent_home ul li.htmlcontent-item-8 {

          width: 100%; } }

 

From:  modules/themeconfigurator/css/hooks.css, line15

 

And that is the only change that has to be made! 

Edited May 20, 2015 by wide-eyed (see edit history)