Can I change the product information section to align with the collapsible content section?

[gethaps]

Hi,

I'm using the Taste theme.

I've noticed on desktop that the size of the product image in the main product information section is smaller than the images in the collapsible content section.

The collapsible content section also seems to be equally split down the page, with narrower padding between the image and the collapsible drawers/text on the other side. Whereas the product info section is more 55:45 split.

Is it possible to lay out the product information section to match the other sections?

Here's what I'm trying to do:

Thanks

[Moeed]

Hey @gethaps 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[gethaps]

Hey @Moeed 

Thanks for getting back to me.

The store URL is https://gethaps.co.uk/

The password is gethaps

Thanks

[namphan]

Hi @gethaps,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
    .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);
    }
    .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);
    }
}

[gethaps]

Hey @namphan 

Thanks so much for helping out.

This code has definitely helped, but the sections are still slightly off on my computer, as you can see here:

Thanks again

[Made4uo-Ribe · Accepted solution]

Hi @gethaps 

Check this one,. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media screen and (min-width: 990px) {
    .product--small:not(.product--no-media) .product__media-wrapper {
        max-width: 95%;
        width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    }
    .product--medium:not(.product--no-media) .product__media-wrapper, .product--small:not(.product--no-media) .product__info-wrapper {
        max-width: 95%;
        width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    }
    .product.product--small.product--left.product--thumbnail {
        column-gap: var(--grid-desktop-horizontal-spacing);
}
    .product__info-wrapper.grid__item {
        padding-left: 0;
}
}
</style>

 And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[gethaps]

Nailed it.

Thank you @Made4uo-Ribe 

[Made4uo-Ribe]

Welcome, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!