Multiple product images covering Add to Cart button on product page

[lolwaut]

Hi,

I have installed the Column Grid Layout and Column Divider Pro add-ons. Ever since installing those (not sure which one the issue is caused by), I have been having problems with products that have multiple product images covering up the Add to Cart button. I'm sure this is an easy CSS issue but I am not very proficient with CSS. Here is a link to a product that has the problem: http://tinyurl.com/qy4vsqx

If anybody can advise... I'd greatly appreciate it... and buy a cup of coffee for the ZC staff

Thanks!

[dbltoe]

Quick answer after a question (which should have been answered with the posting tips). Do you have a mod installed for additional images or is this "out of the box?"

There is a wrapper on the page you presented that is not used by the stylesheet. It is centerBoxWrapperContens. In that wrapper is a table to present the additional images at a three-wide presentation. Trouble is, the table is set to 100% width so it is spreading over the cart button.

Quickest fix is to find the table and change the width to 75%.

[lolwaut]

Thanks so much for the quick reply! I am not using any add-ons for additional product images. The only image related add-on that is installed is ImageHandler, and this has nothing to do with that.

I found the centerBoxWrapperContents table and it is indeed set to 100%. The only reference to that table in my files (using the Developers Toolkit search) is in includes/templates/MY_TEMPLATE/common/tpl_columnar_display.php. This PHP file is a file that was installed with Column Divider Pro. I changed the width of the table to 75% in this file. This fixed the problem, BUT, it also made the width of ALL my columns 75%... on the main page, on my category pages, etc. Although the fix does work, it makes the rest of my whole website look funky. How can I apply this change to just the product pages?

Thank you!

[dbltoe]

This is one of the reasons for the posting tips. I ask if you have a mod for additional images, you say no, just CDP.

From the description of Column Divider Pro

This will give nice divider lines for the following modules/pages:

- New Products on the main page
- Special Products on the main page
- Featured Products on the main page
- Special Products on the Specials... link
- Additional images on the product page
- Customers Also Purchased on the product page
- Cross Sell on the product page (note that Cross Sell is a separate contrib that would need to be installed separately.)

The mod is also probably not PCI passable nor current PHP compatible.

Anyway.....

Here's the current fix BUT, you will need to consider something else when (not if) you upgrade.

Add to the end of your stylesheet.css

.centerBoxWrapperContents table {
width: 75%;
}

Sorry for the rant. There are nearly 200K threads with almost 1.2 million posts on this forum. Probably half of those 200K would have been solved quicker if the tips were answered from the get go. Kudos though for the link. Just might want to make sure everything's ship shape. As the tips say, the only way to avoid search engines attacking a site listed in the forum is to list it as mysiteDOTcom or some other similar way. Using TinyURL or anything like it will be converted easily by the SEs.

[lolwaut]

This is one of the reasons for the posting tips. I ask if you have a mod for additional images, you say no, just CDP.

From the description of Column Divider ProThe mod is also probably not PCI passable nor current PHP compatible.

Anyway.....

Here's the current fix BUT, you will need to consider something else when (not if) you upgrade.

Add to the end of your stylesheet.css

Sorry for the rant. There are nearly 200K threads with almost 1.2 million posts on this forum. Probably half of those 200K would have been solved quicker if the tips were answered from the get go. Kudos though for the link. Just might want to make sure everything's ship shape. As the tips say, the only way to avoid search engines attacking a site listed in the forum is to list it as mysiteDOTcom or some other similar way. Using TinyURL or anything like it will be converted easily by the SEs.

dbltoe,

I really appreciate the reply, once again. Also, I sincerely apologize about not following the posting guidelines. I will be sure to do this on any future posts.

As for my problem, the same issue is occurring when I add the css code you suggested to the end of my stylesheet. It fixes the problem on my product page, but it also makes the width of ALL my columns 75%... on the main page, on my category pages, etc. Although the fix does work, it makes the rest of my whole website look funky. How can I apply this change to just the product pages?

[lat9]

... As for my problem, the same issue is occurring when I add the css code you suggested to the end of my stylesheet. It fixes the problem on my product page, but it also makes the width of ALL my columns 75%... on the main page, on my category pages, etc. Although the fix does work, it makes the rest of my whole website look funky. How can I apply this change to just the product pages?

Create a file named product_info.css, in the same directory as your stylesheet.css file. Move the CSS that dbltoe suggested into that file, removing it from the main stylesheet. That way, the styling will only be present on the product_info page.

[gjh42]

You want to limit the application of the rule to only additional images:

.productAdditionalImages table {
width: 75%;
}

This rule can just go in your main stylesheet.

[lolwaut]

Create a file named product_info.css, in the same directory as your stylesheet.css file. Move the CSS that dbltoe suggested into that file, removing it from the main stylesheet. That way, the styling will only be present on the product_info page.

This solution worked for me and I think we're on the right track here... BUT, I have other tables on my product info pages that are also using the centerboxWrapperContents table... for instance, the recommended products that are at the bottom of the page... an example of these can be seen in the link I provided in the OP. Although this fixes the issue and confines the change to the product info page (instead of site wide), it is still limiting the other image tables on my product info pages to a width of 75%, instead of just the additional product images.

You want to limit the application of the rule to only additional images:

.productAdditionalImages table {
width: 75%;
}

This rule can just go in your main stylesheet.

This solution didn't work for me at all. I think it's because the Column Divider Pro add-on has overridden the productAdditionalImages table with it's own centerboxWrapperContents table.


Thank you for everybody's help on this... I really appreciate this community's willingness to help others out.

[gjh42]

Oops sorry, that is an id, not a class. Try this:

#productAdditionalImages table {
width: 75%;
}

It works on your site in Firebug, at the end of stylesheet_dotline.css.

[lolwaut]

Brilliant! That worked! YAY! I'm going to donate right now... I have received so much help on these forums... I feel it's time. THANK YOU!