Jump to content

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


Recommended Posts

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??

11321_NQG2WlMlbkG2rEXdEjIF_t

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...