Width depending on screen resolution

[Mr.Bean_S]

If you take a look at the page http://webshop.bean-bag.se/10-underdog or the picture below you will notice that header and footer adapt to your screen resolution (well, more or less anyway) but the rest is fixed somehow to a very narrow part of the screen.

 

Naturally I would prefer if everything on the page used the same total width as the header & footer. I have the same problem on all pages an also on the CMS pages that I make.

 

This is how it looks today.

 

I assume page somehow is set up in three columns and that the middle column only is allowed to use 55 - 60 % of that and I can't find the place to change this since I right now don't use any blocks to the right or the left.

 

I'm using version 1.5.3.1 an am at least pleased to see that the Minic slider uses the full width.

 

For some reason pictures are allowed to use more width than text. See this page:

http://webshop.bean-bag.se/content/10-underdog

 

If I look at the mobile version of the link above the text really use the full width of my 24" screen.

[vekia]

go to header.tpl file located in your theme directory

 

you've got there code:

<div id="center_column" class=" grid_5">

 

change grid_5 to grid_9

[Mr.Bean_S]

go to header.tpl file located in your theme directory

 

you've got there code:

<div id="center_column" class=" grid_5">

 

change grid_5 to grid_9

That was too simple to be true and like I suspected not a total solution it seems? Guess I might need to change grid for products as well and is there a restriction on the amount of words in the first square with the blue dog in it (Category description)?

 

 

I would especially want the column for product description to be a lot wider. The picture and cart column are wide enough.

[vekia]

in this case there is no grid values, just simple width params, take a look into file: http://webshop.bean-bag.se/themes/default/css/product_list.css

 

you've got there definition of width of the blocks, here it is:

 

product_list li .center_block {
float: left;
padding: 0 7px;
width: 342px;
border-right: 1px dotted #ccc;
}

and width in:

#product_list li .right_block {
position: relative;
float: left;
width: 145px;
text-align: right;
}

[Mr.Bean_S]

in this case there is no grid values, just simple width params, take a look into file: http://webshop.bean-...roduct_list.css

 

you've got there definition of width of the blocks, here it is:

 

product_list li .center_block {
float: left;
padding: 0 7px;
width: 342px;
border-right: 1px dotted #ccc;
}

and width in:

#product_list li .right_block {
position: relative;
float: left;
width: 145px;
text-align: right;
}

Can I change those three into percent in a simple way?

Now I have 15px - 342px - 145px

 

Am I right to assume that picture and descrption is in the center_block and "Add to basket" is in the "Right" one?

 

If so 80% and 20% should work better for most resolutions or am I missing something?

If percent isn't possible perhaps the change from 342px to 645px will work for most users?

(Right now it's changed into 645px as you can see if you visit the page).

 

Thanks for this big improvement but like I said, a change into percent might look nicer?

 

Is there a similar solution for showing more text in the category description above? One would think it would linebreak if that was the problem.

Edited August 18, 2013 by Mr.Bean_S (see edit history)