Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

Ecomsmartify
Shopify Partner
113 2 31

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 

Ecomsmartify_0-1732438067490.png

 

 

my product page 

 

 

Ecomsmartify_2-1732438067471.png

 

 

 please help me with this thanks in advance 

Accepted Solution (1)
DaisyVo
Shopify Partner
816 103 119

This is an 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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 11 (11)
Ecomsmartify
Shopify Partner
113 2 31

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

Ecomsmartify
Shopify Partner
113 2 31

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

DaisyVo
Shopify Partner
816 103 119

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
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Ecomsmartify
Shopify Partner
113 2 31

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 

Screenshot 2024-11-21 093112.png

DaisyVo
Shopify Partner
816 103 119

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Ecomsmartify
Shopify Partner
113 2 31

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

Screenshot 2024-11-24 155301.png

DaisyVo
Shopify Partner
816 103 119

This is an 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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Ecomsmartify
Shopify Partner
113 2 31

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
Shopify Partner
113 2 31

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
Shopify Partner
816 103 119

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Ecomsmartify
Shopify Partner
113 2 31

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