CSS Global Custom Theme, How to Stop Columns Going Onto Next Line When there is Enough Space???

[greatthings]

Hello,

I have a question for those who have made custom themes, modifying, global.css

I have added more columns in administrator for the Home Featured module,

I have given more room for columns to fit, but there is like an invisible barrier and they just go to next line, instead of li naturally filling space until the end and dropping to the next line once hitting the right border like li's usually do

I actually have a lot of css knowledge, but because of the amount of css and the fact it was written by someone with very different mindset towards css coding to myself, I am left in wonder, I have no idea how to fix it??


I modified the width to accommodate the extra columns via div Id #center_column there is plenty of room because it is now a two column theme, but mysteriously it behaves like there is is an inner div or block with a shorter width, I can not find anything to evidence this myself??

[Guts]

Hello,

I have a question for those who have made custom themes, modifying, global.css

I have added more columns in administrator for the Home Featured module,

I have given more room for columns to fit, but there is like an invisible barrier and they just go to next line, instead of li naturally filling space until the end and dropping to the next line once hitting the right border like li's usually do

I actually have a lot of css knowledge, but because of the amount of css and the fact it was written by someone with very different mindset towards css coding to myself, I am left in wonder, I have no idea how to fix it??


I modified the width to accommodate the extra columns via div Id #center_column there is plenty of room because it is now a two column theme, but mysteriously it behaves like theis is an inner div or block with a shorter width, I can not find anything to evidence this myself??

Give a reference to the store, will help correct

[greatthings]

Hello Guts, thankyou very much for your kind offer. Thanks to jhnstcks solution below the problem is now fixed, the css has no other issues

[jhnstcks]

You need to edit the homefeatured.tpl file, near the top is a line of code that looks like :

            {assign var='nbItemsPerLine' value=2}

You need to alter the value to however many you have per line.

[greatthings]

jhnstcks Thankyou so much

That fixed it perfectly. That is indeed the answer

[jhnstcks]

No worries.

The answer isnt always in the obvious place.

[Cronos]

Hi Greatthings,

This is the container code for your featured products:

Solution:

1. Go to line 1024 to give width to the "block_content" div (width:auto;)
2. Go to line 909 and give width: auto; (just in case it behaves odd in other browsers)
3. Go to line 1028 and you can see that each li has a width of 133px. Increase the width of that to fit 4 columns in the width you gave in step 1 OR
4. You can do what jhnstcks has recommended in the above post.

That should fix your problem.

Cheers..
Cronos

[greatthings]

Thankyou Cronos for your idea, It sounds good for css only modification. Unfortunatley I tried what you said but column did not go onto the next line. Being a theme designer I am sure you have got everything working just fine, but for me It didn't

I tried

div.block ul { list-style:none; width:auto} Is that what you were suggesting?

and

.block_content {width:auto}

and adjust li's to taste (As in make sure there is enough room for them)

[Atch]

Hi,

Try to put a Background color blue in the div.block ul.

V++

Atch