Solved

Spacing & first photo big size

Luxrylilly24
Tourist
5 0 2

hi, i have problem of spacing b/w media photos and title+description side & my first photo is too small ? 

Please help me ! 

Image 02.01.24 at 13.57.jpeg

Accepted Solution (1)
websensepro
Shopify Partner
872 117 126

This is an accepted solution.

Hi, @Luxrylilly24.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

.product--medium:not(.product--no-media) .product__media-wrapper {
    max-width: 50% !important;
}

Result:

websensepro_0-1704292699515.png

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 11 (11)

Abdosamer
Shopify Partner
820 146 161

Hi @Luxrylilly24 , can you share your store url?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
Abdosamer
Shopify Partner
820 146 161

@Luxrylilly24 , go to section-main-product.css and add the following code :

.product--medium:not(.product--no-media) .product__media-wrapper, .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 50% !important;
    width: calc(74% - var(--grid-desktop-horizontal-spacing) / 2);
}

Result:

Abdosamer_0-1704201631964.png

 


 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
Luxrylilly24
Tourist
5 0 2

still spacing is same !

how can do first image in big size and others remains as thumbnails ?

Abdosamer
Shopify Partner
820 146 161

@Luxrylilly24 , try to add this code :

.product--medium:not(.product--no-media) .product__media-wrapper {
    max-width: 50% !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
websensepro
Shopify Partner
872 117 126

This is an accepted solution.

Hi, @Luxrylilly24.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

.product--medium:not(.product--no-media) .product__media-wrapper {
    max-width: 50% !important;
}

Result:

websensepro_0-1704292699515.png

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Luxrylilly24
Tourist
5 0 2

yes,it worked...one thing more if u can see media pics and title description sections are too much close ...i want to do some spacing ?

websensepro
Shopify Partner
872 117 126

Hi, @Luxrylilly24.

Apply these Css codes.

media-gallery#MediaGallery-template--19289396937028__main {
    padding: 0 30px;
}

Result:

websensepro_0-1704298888069.png

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Luxrylilly24
Tourist
5 0 2

Could you please tell me the proper path >Assets then which media path ?

Abdosamer
Shopify Partner
820 146 161

@Luxrylilly24 , can you please put the code below this last bracket so the code work correctly:

Abdosamer_0-1704203319690.png

 

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

Moeed
Shopify Partner
3531 889 1105

Hey @Luxrylilly24 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App