Docs

[thecashbag]

I have removed the WooCommerce product page tabs, and inserted in a custom built Cornerstone page in their place.

Everything is working fine, except I can’t figure out how to make that section (which used to be the product tabs but now has now been replaced with my custom cornerstone content) go full-width. I have attached a screenshot with comments drawn in blue that shows what I mean.

Here is an example website that has achieved what I need. This is NOT my website, it is just an example I have found that also uses Theme X and has achieved a similar result that I want: https://www.versame.com/product/starling/

How can I do this for my website?

[thecashbag]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.single-product .x-container.max.width.offset {
    max-width: 100%;
    width: 100%;
}

Hope it helps 🙂

[thecashbag]

Thanks, that has made the bottom part of the page full width. But I need to preserved the boxed layout of the top product summary area (check the screenshot previously attached for an example).

[Thai]

Hi There,

Please try adding the following CSS instead:

.single-product .x-container.max.width.offset {
    max-width: 100%;
    width: 100%;
}

.woocommerce div.product .images {
    width: 34%;
    margin-left: 10%;
}

.woocommerce div.product .summary {
    width: 34%;
    margin-right: 10%;
}

Hope it helps 🙂

[thecashbag]

Thanks for the help 🙂

I have managed to fix it with another method. I placed a div around the inserted content, and applied a negative margin to make it full width.

But now I have another problem. I am seeing a strange black border around the Essential Grid images. It does not appear when the screen is on mobile, it only shows on desktop.

I have attached a screenshot to show this problem. You can also take a look at it live on the product page previously linked.

Any idea what is happening here? I’m not sure when it appeared and is very strange that it only shows on desktop view.

[Thai]

Hi There,

Try adding the following CSS:

.esg-grid .mainul li.eg-washington-wrapper,
.eg-washington-container {
    background-color: transparent !important;
    border: none !important;
}

Hope it helps 🙂

[Author]

Posts