How do i align and center my shop and change the overall width

[Antony121]

Hello all am trying to find out where or in which files I need to make changes to center the overall shop and change the width of it from the standard template size to a smaller overall width.  Any help is appreciated thanks.

[dioniz]

It would be good to know what PS version you have, what theme and see your site if possible, to help you

[vekia]

default theme is centered by default.

 

what theme you use? and what prestashop version?

[Antony121]

http://gourmetnomnom.com/index.php?controller=order&live_configurator_token=8b7da00b416b288ad503bdc0ea81b4b1&id_shop=1&id_employee=1&theme=theme4&theme_font=

above is site link and bootstrap is the default theme version 1.6 i guess basically i think it looks like its taking up way too much landscape with regards to overall look and i would lie to put everything nice and tidy so as to have borders at the outside of the columns for a bg image perhaps.

 

Thanks

sorry wrong page http://gourmetnomnom.com/index.php?live_configurator_token=8b7da00b416b288ad503bdc0ea81b4b1&id_shop=1&id_employee=1&theme=theme4

[vekia]

this is screenshot from your website:

 

as you can see it's centered.

 

 

if you want to decrease width of theme, change width value in:

@media (min-width: 1200px)
.container {
max-width: 1170px;
}

it's a part of http://gourmetnomnom.com/themes/default-bootstrap/css/global.css file line ~989

[Antony121]

Thanks I tried that but it did not seem to really change the width at all perhaps there are other rules that are holding it in place.  Also I noticed that the image size of the home page products is 250 i tried to change this in the backoffice under images but it did no seem to take either am i missing something?  Thanks for your help.

[HeadMaster]

Hello,

 

Here's the changes you have to do in order to resize your Prestashop 1.6: (in this case, I reduced the width to 1000px from 1170px)

 

==== themes / default-bootstrap / css / global.css ====
@media (min-width: 1030px) {
  .container {
    max-width: 1000px; }
================================================

 

Look for @media in global.css file and make the changes as follows:

- replace 1200px with 1030px

- replace 1170px with 1000px

- replace 1199px with 999px

 

 

==== themes / default-bootstrap / js / global.js ====
function blockHover(status)
{
    $(document).off('mouseenter').on('mouseenter', '.product_list.grid li.ajax_block_product .product-container', function(e){

        if ('ontouchstart' in document.documentElement)
            return;
        if ($('body').find('.container').width() == 1000)
        {
            var pcHeight = $(this).parent().outerHeight();
            var pcPHeight = $(this).parent().find('.button-container').outerHeight() + $(this).parent().find('.comments_note').outerHeight() + $(this).parent().find('.functional-buttons').outerHeight();
            $(this).parent().addClass('hovered');
            $(this).parent().css('height', pcHeight + pcPHeight).css('margin-bottom', pcPHeight * (-1));
        }
    });

    $(document).off('mouseleave').on('mouseleave', '.product_list.grid li.ajax_block_product .product-container', function(e){
        if ($('body').find('.container').width() == 1000)
            $(this).parent().removeClass('hovered').removeAttr('style');
    });
}
=============================================

 

Hope this will help...

Edited July 4, 2014 by HeadMaster (see edit history)

[Nilesh612]

thank you very much HEADMASTER