Photo's on my site messed up!

[lucasuijtt]

Hello,

 

My site snapshirts.nl had 3 pictures on the homepage, next to eachother. Without changeing anything, the pictures are now underneath each other. I tried to re-add them, change their size, but nothing worked.

 

Can someone help?

 

Thanks!

[musicmaster]

The have class "col-xs-12". That should be "col-xs-4". But as I have no idea how that is generated I can't help you any further.

[HugeB]

I fixed that for you and soluton works 100%. You need to put that CCS code on homepage:

<style>
li.htmlcontent-item-1.col-xs-12 {
    width: 33%;
    float: left;
}


li.htmlcontent-item-2.col-xs-12 {
    width: 33%;
    float: left;
}


li.htmlcontent-item-3.col-xs-12 {
    float: left;
    width: 33%;
}
</style>

Edited February 28, 2017 by HugeB (see edit history)

[lucasuijtt]

 

I fixed that for you and soluton works 100%. You need to put that CCS code on homepage:

<style>
li.htmlcontent-item-1.col-xs-12 {
    width: 33%;
    float: left;
}


li.htmlcontent-item-2.col-xs-12 {
    width: 33%;
    float: left;
}


li.htmlcontent-item-3.col-xs-12 {
    float: left;
    width: 33%;
}
</style>

Thanks for the response, where can i find the CSS for the homepage? there are multiple CSS files and i don't know which one is the correct one.

[HugeB]

I sugguest you to edit theme file directly and just put that code on last line. For loading "new" CSS on all pages, i reccommend you to put that code in header or footer. I think that will be the most easy way for you.

 

You can find file for editing on location: 

YOURSITE/themes/classic/templates/_partials/footer.tpl

I recommend you to create child theme, but if you need fast solution then just edit that footer.tpl and when you will update PrestaShop to new version check if code is still there (i don't know how often you update your core files).

 

Kind regards!

Edited March 2, 2017 by HugeB (see edit history)

[lucasuijtt]

I sugguest you to edit theme file directly and just put that code on last line. For loading "new" CSS on all pages, i reccommend you to put that code in header or footer. I think that will be the most easy way for you.

 

You can find file for editing on location: 

YOURSITE/themes/classic/templates/_partials/footer.tpl

I recommend you to create child theme, but if you need fast solution then just edit that footer.tpl and when you will update PrestaShop to new version check if code is still there (i don't know how often you update your core files).

 

Kind regards!

 

Thanks so much for your response, sadly I can't get it going. I edited the footer.tpl file, it now looks like this:

{*
* 2007-2016 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2016 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}
{if !isset($content_only) || !$content_only}
					</div><!-- #center_column -->
					{if isset($right_column_size) && !empty($right_column_size)}
						<div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>
					{/if}
					</div><!-- .row -->
				</div><!-- #columns -->
			</div><!-- .columns-container -->
			{if isset($HOOK_FOOTER)}
				<!-- Footer -->
				<div class="footer-container">
					<footer id="footer"  class="container">
						<div class="row">{$HOOK_FOOTER}</div>
					</footer>
				</div><!-- #footer -->
			{/if}
		</div><!-- #page -->
{/if}
{include file="$tpl_dir./global.tpl"}
	</body>
</html>
<style>
li.htmlcontent-item-1.col-xs-12 {
    width: 33%;
    float: left;
}


li.htmlcontent-item-2.col-xs-12 {
    width: 33%;
    float: left;
}


li.htmlcontent-item-3.col-xs-12 {
    float: left;
    width: 33%;
}
</style>

but the site (snapshirts.nl) still has the big pictures underneath each other.

 

Thanks again!

[HugeB]

HI,

 

 

Did you clear PrestaShop cache after change? 

 

You will find "Clear cache button" here: Backoffice > Advanced Parameters > Performance

 

Regards

[lucasuijtt]

HI,

 

 

Did you clear PrestaShop cache after change? 

 

You will find "Clear cache button" here: Backoffice > Advanced Parameters > Performance

 

Regards

 

Thank you so much!! The site is perfect now