SENSE: Make Product Description & Product Page Content FULL WIDTH

[MaxMedReady]

SENSE THEME

All the other posts online about this issue don't seem to assist those using the Sense theme.

So I'm asking here:

How can I make the product description wider?
Or Full Width?

How can I make the Collapsible Content section full width?

[ZestardTech]

Hello There,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

[MaxMedReady]

https://medreadyaustralia.myshopify.com/
pass: baimee

Please note I currently have two different versions of collapsible content.
One version is inside the product description, this is half width.
Second version is outside product description, which is a section and this is wider but not full width.

I wish to know how to adjust the width of the entire product description to full width.
I also wish to know how to adjust the width of just the collapsible content to full width.

[MaxMedReady]

@ZestardTech any solution?

[MaxMedReady]

@MarinaPetrovic are you able to assist me with this? I appreciate all the help you've shown me so far.

[MarinaPetrovic]

Hi @MaxMedReady , in order to make product-description wider, you'd have to change slider width first. So go to edit code > assets > section-main-product.css. Find this element:

.product--medium:not(.product--no-media) .product__media-wrapper, .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 55%;
    width: calc(55% - var(--grid-desktop-horizontal-spacing) / 2);
}

Change it with:

.product--medium:not(.product--no-media) .product__media-wrapper, .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 50%;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}

After that find this element:

.product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper {
    max-width: 45%;
    width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2);
}

And change it with:

.product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper {
    max-width: 50%;
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}

[MaxMedReady]

Are you able to clarify what those recommendations actually Do?

I was hoping to learn how to edit both of these options (below), independently, and then decide for myself which one to go with:

Option 1. I wish to know how to adjust the width of the entire product description to full width.
Option 2. I wish to know how to adjust the width of ONLY the collapsible content to full width.

[MarinaPetrovic]

In that case you'd have to make column here. So you don't have images on the left side. Also, you should make different logic for your images since it's weird to have 5 images until you see the text and purchase options. 

Anyway, you can play with it, find this element:

.product.grid {
    gap: 0;
}

Change it with:

.product.grid {
    gap: 0;
    flex-flow:column;
}

And change values of the elements I mentioned in my previous answer:

.product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper {
    max-width: 100%;
    width: calc(100% - var(--grid-desktop-horizontal-spacing) / 2);
}

Same goes for the other element, instead of 50% add 100%.

[MaxMedReady]

Thank for your help but I have not achieved what I want. I do not like how it looks at all.

How can I simply increase the width of the collapsible-content section? Is there something I edit inside collapsible-content.css?
@MarinaPetrovic @ZestardTech 

[MaxMedReady · Accepted solution]

I have discovered my own solution, opening collapsible-content.css and finding the following code:

.collapsible-content-wrapper-narrow {
margin: 0 auto;
padding-right: 1.5rem;
padding-left: 1.5rem;
max-width: 73.4rem;
}

and adjusting the max-width to something like 93.4rem.

[Shroud]

Isn't there a way to achieve full with with only mobile view?