Make product image larger and remove extra space right and left

[kashco]

How to make product image large so it is visible and looks nice. I want it to be wider and also increase the height relative to the product information on the right. Is there a way to fix this ?

Example below: 

Also, I want to remove the extra white space and ensure to add social media icons for sharing. 

[topnewyork]

Hi @kashco , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[kashco]

https://kashco-interiors.myshopify.com - password is kashco.

Please also let me know how we can add the social media sharing buttons for each product kindly. (Text, whatsapp, facebook, etc)

[topnewyork]

@kashco 
I am giving you the link to use the app for sharing buttons for each product. Hope it will be helpful for you.

https://apps.shopify.com/embed?utm_campaign=websense-sco

[topnewyork]

@kashco 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.page-width {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.product__media {
    width: 60% !important; 
    height: auto;
    max-width: none !important;
    padding: 0 !important;
    margin-right: 20px !important; 
}
.product__media img {
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain !important; 
)
.product__info {
    width: 40% !important; 
    padding-left: 20px !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[kashco]

No it messed up

[Made4uo-Ribe]

Hi @kashco 

TRy this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.page-width:has(.product) {
    max-width: 100%;
}

@media screen and (min-width: 990px) {
small:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__info-wrapper {
        max-width: 30%;
        width: 30%;
    }

 .product--small:not(.product--no-media) .product__media-wrapper {
        max-width: 65%;
        width: 65%;
    }
}

</style>

• And Save. 
• Result:
• 

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

[kashco]

No luck