Full width view

[mohitsingh538]

Hi there!

 

I'd like to modify the layout of my website http://dirtrades.com. Right now if you see the website has enough blank white space on the either side of the website's main content. I mean the header and footer are pretty small to cover the whole page. This ruins the view and very honestly speaking I'm very much concerned about the layout of the webiste. Could you please suggest me how can I increase the width of the contents so that it can cover the whole page...not even a single inch should be left blank!

 

One more thing I'd like to know...how can I insert images below the PayPal images on both the sides so that they can covere the blank area. I want to insert some meaningful images and link them to some additional pages.

 

Please help me out.

Edited January 15, 2014 by mohitsingh538 (see edit history)

[walidon]

when I click the link you provided i got the following message:

The page you are looking for cannot be found

[mohitsingh538]

Link is working perfectly. Please double check!

[walidon]

when i click on the link i get this

http://dirtrades.com/fr/index

 

even if i delete the /fr/index to keep it only http://dirtrades.com/, it comes back to http://dirtrades.com/fr/index again! there is like a redirection or something wrong!

[vekia]

for me it works well, but can't understand what you want to change there...

[walidon]

this is what i get in IE, FF and GC

 

 

[mohitsingh538]

Walidon- Oh! may be, you're trying to access the website from a country which I've either blocked or don't serve. As you can see in the above picture, the U.S. moderator has gotten a clear view of it.

 

Anyways, I'm attaching a picture of the same with the area marked with arrows on either sides which I want to hide/remove. Hope this will help you out.

 

Edited January 16, 2014 by mohitsingh538 (see edit history)

[vekia]

ok now it's clear.

well, in this case you have to modify theme, instead of width in pixels you have to use percentages.

check grid_prestashop.css file located in your theme css directory

you will see there "grid" values

change them to percentages.

 

unfortunately, there is no other way to achieve what you expect.

[mohitsingh538]

Sorry for bothering you again but actually I'm not a technical guy. I have but very little knowledge of coding and that's only limited to HTML. I've really no idea which of the following should be edited. I don't wanna mess the whole thing up because I've already gone too far and can't afford to make any BIG mistake that would end me up reinstalling Prestashop. This is what I got:

 

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9 {
    display:inline;
    float: left;
    position: relative;
    margin-right: 20px;
}


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}


/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:535px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:980px;}


/* Prefix Extra Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .prefix_1 {padding-left:111px;}
.container_9 .prefix_2 {padding-left:222px;}
.container_9 .prefix_3 {padding-left:333px;}
.container_9 .prefix_4 {padding-left:444px;}
.container_9 .prefix_5 {padding-left:555px;}
.container_9 .prefix_6 {padding-left:666px;}
.container_9 .prefix_7 {padding-left:777px;}
.container_9 .prefix_8 {padding-left:888px;}


/* Suffix Extra Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .suffix_1 {padding-right:111px;}
.container_9 .suffix_2 {padding-right:222px;}
.container_9 .suffix_3 {padding-right:333px;}
.container_9 .suffix_4 {padding-right:444px;}
.container_9 .suffix_5 {padding-right:555px;}
.container_9 .suffix_6 {padding-right:666px;}
.container_9 .suffix_7 {padding-right:777px;}
.container_9 .suffix_8 {padding-right:888px;}


/* Push Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .push_1 {left:111px;}
.container_9 .push_2 {left:222px;}
.container_9 .push_3 {left:333px;}
.container_9 .push_4 {left:444px;}
.container_9 .push_5 {left:555px;}
.container_9 .push_6 {left:666px;}
.container_9 .push_7 {left:777px;}
.container_9 .push_8 {left:888px;}


/* Pull Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .pull_1 {left:-111px;}
.container_9 .pull_2 {left:-222px;}
.container_9 .pull_3 {left:-333px;}
.container_9 .pull_4 {left:-444px;}
.container_9 .pull_5 {left:-555px;}
.container_9 .pull_6 {left:-666px;}
.container_9 .pull_7 {left:-777px;}
.container_9 .pull_8 {left:-888px;}

Edited January 17, 2014 by mohitsingh538 (see edit history)

[vekia]

.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:535px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:980px;}

instead of width in pixels, use percentages

980px = 100%