Skip to main content

Width problem when listing products via table

13 years 10 months ago - 13 years 10 months ago #81877 by simon2012
Hi

I'm having a width problem on certain pages when listing products via table layout. As shown in attached images, the main content area seems to extend out of content box on certain pages. Is there any ways to fix this?

compusale.cloudaccess.net/computer-parts...ssories-modding.html

compusale.cloudaccess.net/computer-parts...ual-channel-ram.html

compusale.cloudaccess.net/computer-parts...uad-channel-ram.html



thanks
Last edit: 13 years 10 months ago by simon2012.

Please Log in or Create an account to join the conversation.

13 years 10 months ago #81896 by Xavier
Hi,

You can try to reduce the width of the td in CSS.
www.hikashop.com/fr/support/documentation/faq.html#css

Please Log in or Create an account to join the conversation.

13 years 10 months ago #81972 by simon2012
Hi Xavier

I'm not sure how to change the table via css editing. Can you please give me an example?

The product table only seems to extend out of the content box on some pages. It seems most logical to have a css that limit the maximum width of the table.

Thanks

Please Log in or Create an account to join the conversation.

13 years 10 months ago #81975 by sambob
Hi Simon 2012,

I think you are trying to fit too much in the the limited space you have in the middle of your template.

The page with the biggest overhang is the one with the longest product names. The ones that fit are the ones with smaller product names.

Do you need them that long? Also remember that the product name will probably be used as the URL and these will be VERY long

If you want to keep the long product names, maybe reduce the padding around some of the elements (they are currently set at 20pxls but could be changes via a custom CSS to:

.hikashop_product_name_row {
padding: 0 2px;
}

.hikashop_product_price_row {
padding: 0 2px;
}
.hikashop_product_add_to_cart_row {
padding-left: 2px;
}
.hikashop_product_image_row {
padding: 2px;
}

Add something like that to your custom CSS (Configuration > Display)

To see these behaviors, a great tool if Firebug that your can get in Firefox to inspect (and display changes) a page's CSS.

Don't look at what is and ask 'why?'; look at what isn't and ask 'Why Not!'
The following user(s) said Thank You: simon2012

Please Log in or Create an account to join the conversation.

13 years 10 months ago #82028 by Eliot
sambob said everything :)

It's just a CSS issue that you can fix by adding some css in Display>Configuration by editing the front end css file.
Using width property can also help you.
Do not hesitate to take a look at our FAQ for more information about css stuff :)

Please Log in or Create an account to join the conversation.

Time to create page: 0.077 seconds
Powered by Kunena Forum