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!

[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!

[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; }
}