how to remove extra whtie spacing from product page on dawn theme

[Ecomsmartify]

I want to remove the spacing between thumbnail, product main media image and I want the product info spacing exact like the provided screenshoot below also reffrence link attached below 
My product page link: https://store1.ecomsmartify.shop/products/ghazal

store password: 4

Reference product page link: https://www.annusabrar.net/rohma

reffrence image 

my product page 

 please help me with this thanks in advance 

[Ecomsmartify]

Hi @CharlesBernado 
Can you help me to remove the spacing please guide me Thanks

[Ecomsmartify]

this is an a disussion plateform not an a client hunting plateform

[DaisyVo]

Hi @Ecomsmartify 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.product-media-container.constrain-height.media-fit-contain {
    width: 100%;
}

Here is the result: https://prnt.sc/lZ2Ak7xRSls0

I hope this helps

Best,

Daisy

[Ecomsmartify]

hello @DaisyVo 
thanks for sharing the solution after adding this this will increase the full width but I don't want to change the width I just want to move my thumbnail and the image near to the product info like this attached image below 

 

[DaisyVo]

Hi @Ecomsmartify 

Please try this code 

.product.product--medium > .grid__item.product__media-wrapper {
    max-width: 50% !important;
}

Here us the result: https://prnt.sc/HPg9cGa2zMal

I hope this helps

Best,

Daisy

[Ecomsmartify]

Hi @DaisyVo 
Dear Daisy, I have added some coding by my self and I'm able to manage to remove the margin from rigth side but I'm not able to remove the margin from left side Please help me to remove the margin from left side and I dont want to move the image to left side after removing the margin I want to keep the right position on dektop I really appricate you Daisy Thanks

 

[DaisyVo · Accepted solution]

@Ecomsmartify 

Please add this code 

@media screen and (min-width: 1024px){
.product--thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
    width: 300px;
}
}

Here is the result: https://prnt.sc/_UQYjQIwg_Ax

Best,

Daisy

[Ecomsmartify]

hello @DaisyVo 
now there is no space left or rigth thanks for the solution. can we increase the size of product media or keep the ascpect ration? because now my image size is too small Thanks I appriciate it

[Ecomsmartify]

I have increase the width to maintain the good size but now my breadcrumbs not follow the page width after adding this code @DaisyVo Please help me to figure out this thanks a lot 

[DaisyVo]

HI @Ecomsmartify 

To ensure that other users can find appropriate answers when searching for similar questions on the community, I will address your requests within your original goal. If this resolves your issue, I will be grateful if you mark our answer as the solution.

If you have another question, feel free to create a new thread and tag me. I’ll take a look and do my best to assist.

Best,

Daisy

[Ecomsmartify]

Hello @DaisyVo 
I really appriciate your effort to solve my issue Thanks alot.