Extra Content Block Bug on Product Detail Page

Hello,

On the product detail page, I’m having trouble getting the extra content block to fit within the container.

1. I created a three column HTML Block and titled it ‘THE OFFICIAL DIFFERENCE’. [html_block id="729"]

2. When editing the product detail page from the wordpress backend http://officialhairstore.com/wp-admin/post.php?post=557&action=edit, in the Product Setting (Custom metabox from theme) section, I selected ‘THE OFFICIAL DIFFERENCE’ from the extra content drop down.

3. Also in the Product Setting section, in the ‘Extra Content Position’ panel, I selected for the extra content to be displayed ‘After Content’.

The HTML Block showed up right where I wanted it on the page but the content extended outside the site’s container. I went back into the HTML block and tried adjusting the Background Override in the Visual Composer row settings to get the background image and content to appear properly within the container. I also tried adjusting the Row Stretch from within the Visual Composer Row Settings as well as playing with the different background options under the Design Options tab. No matter what I try, I cannot get the content to display correctly within the container.

You will see on this product detail page http://officialhairstore.com/product/brazilian-gray-body-wave-sew-in-hair-extensions/ that I have created three very colorful green, purple and blue blocks with the words Free Shipping, Satisfaction Guarantee and Based in Los Angeles, CA under the share buttons. I made them this way so we can all see the blocks and their position very clearly.

I want those three colored blocks to fit within the site’s container at any browser width. The blocks should not be full-width. They should be no wider than the width of the white box below containing a product description and product showcase video.

Thanks so much!

Hello,

Thank you for your detailed explanation of the issue.

It seems to be a small bug in our theme so we will check it in the next update. As for now, please try to disable Stretch row for this block and add the following code to the Custom CSS section in Theme Settings

.single-product-content > .container + .vc_row {
	max-width:1170px;
  	margin-left:auto;
  	margin-right: auto;
}

Kind Regards
Xtemos

Hello,

Thanks so much! This is much better. However, I have now put in the HTML block I would like to display there and the text is not appearing how it should.

You will see I have created 3 info boxes with Fast Free Shipping, 30-Day Guarantee and Based in the U.S.A. The entire subtext for each of those items is suppose to appear on the second line below the titles.

I have duplicated this row below the colorful “Brazilian Gray Body Wave” panel with product description and showcase video and you will see it appears as it should there.

I think it may have to do with the max-width or margins but I can’t seem to find the right combination.

Should be a quick fix. Please check.

Thanks again,

Les

Hello,

As we can see, you have used span tags to wrap your text in these blocks. Try to use p or div instead to make them separated.

Regards

That worked well. Thank you!

Les

You are welcome!

[Author]

Posts