Featured Products Listing Overlapping Images

[obrien48]

Hi Everyone,

It's been a while since my last Zen Cart build and I've got myself a bit stuck. My plan is to only use a few parts of Zen to create a simple print my artwork based site. As I only need a few images on the homepage I opted for the 'featured products' box to appear, I've been able to resize everything and layout is basically there however as I need large images (275px square) everything is overlapping!

I've tried adding margin and padding to '.centerBoxContentsFeatured' to no avail and to be honest I'm stumped!

Link here

Also, I don't want the listing to 'wrap' over, instead I want a horizontal scroll bar to appear but only vertical is appearing at the moment!

Any advice of where to look would be great.

[lat9]

The link you gave doesn't work ...

[obrien48]

The link you gave doesn't work ...

Sorry here it is

www.crearty-kids.co.uk

I've completely broken it now! Probably with the dozen add ons I've loaded into the site trying to make it work!

Many thanks for your help

[lat9]

You're right, it's quite the broken site! Do you have a backup so you can get the site back to kind-of broken?

[obrien48]

You're right, it's quite the broken site! Do you have a backup so you can get the site back to kind-of broken?

Lol I did warn you! I've been playing with it and managed to get it back to state when I first posted. The ahem 'images' are just place holders for now so it's all about the spacing. In fact my plan is the strip out all the text and prices, replace the images with a buy it now button which adds directly to the cart and then replace the button with my 'product' image so one click to the cart. Phew, talk about the long way round!

[lat9]

OK, step#1: Go to your admin's Configuration->Index Listing and change Featured Products Columns per Row to something like 3 or 4 instead of the 6 that it currently is. You can't cram 275px worth of image into 16% of the page width!

[obrien48]

OK, step#1: Go to your admin's Configuration->Index Listing and change Featured Products Columns per Row to something like 3 or 4 instead of the 6 that it currently is. You can't cram 275px worth of image into 16% of the page width!

Ok done.

Can't I just add a scroll bar (horizontal) to the featured products div? What is the piece of code that calculates the width of featured products content divs? Can't it just be set to a static fixed pixel size?

[lat9]

Ok done.

Can't I just add a scroll bar (horizontal) to the featured products div? What is the piece of code that calculates the width of featured products content divs? Can't it just be set to a static fixed pixel size?

The featured products module (/includes/modules/featured_products.php (copied to /includes/modules/YOUR_TEMPLATE/featured_products.php before you edit it) contains the calculations.

[obrien48]

The featured products module (/includes/modules/featured_products.php (copied to /includes/modules/YOUR_TEMPLATE/featured_products.php before you edit it) contains the calculations.

Thanks so much. Last thing. How do I stop the listings 'rolling over' to the next line?

[gjh42]

Set your featured products per row to the total number you want to use, then add to your stylesheet

#indexHomeBody #indexDefault {overflow: auto;}
#featuredProducts {width: 1920px !important;}

This will give the featured container the width it needs to hold all of the images (adjust to match your total images+margins width), and the overflow: auto; will make a horizontal scrollbar appear so the content width doesn't force the page to expand. The #indexHomeBody limits the scope to only the homepage.