Product images to be in edge in product page

[Sivadarshan]

I need to customize my product page, the need is the product images want to be aligned to left edge of the website and top below immediate to breadcrumbs section. I’ll attach the reference image

https://rugd-in.myshopify.com/

password: rugged

[JasmeetVT14313]

HI @Sivadarshan
Add below code to end of section-main-product.css file

@media screen and (min-width: 750px){
    product-info .page-width {
        padding: 0;
    }
    
    product-info {
        padding-top: 0 !important;
    }
    .product__info-wrapper {
        padding-top: 30px !important;
    }
}

If you find this information useful, a Like would be greatly appreciated.
And If this resolves your issue, kindly hit Like and mark it as the Solution! Thank you!

[Dan-From-Ryviu]

Hi @Sivadarshan

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (min-width: 750px) {
    .product__column-sticky { top: 10rem !important }
    .product .product__media-list  {         
        column-gap: 0;
        row-gap: 0; }
}

[Sivadarshan]

It works, I need to remove these spaces too and when I try to scroll the product name gets hided

[JasmeetVT14313]

@Sivadarshan
Add the below code at the end of same file

@media screen and (min-width: 750px) {
    .product__column-sticky {
        top:7rem
    }
    .grid {
        column-gap: 0;
        row-gap: 0;
    }
}

If you find this information useful, a Like would be greatly appreciated.
And If this resolves your issue, kindly hit Like and mark it as the Solution! Thank you!