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

Re: How to remove spacing between images in product description

Solved

How to remove spacing between images in product description

hobbyzoneuk
Visitor
3 0 1

Hi,

I'm currently using Dawn theme, just wondering if there is a way to remove the spacing between product images in product description section? (See picture below)

 

Also, is it possible to auto resize the images in product description for mobile? 

 

My store URL is https://hobbyzoneuk.co.uk/

 

Thank you in advance.

hobbyzoneuk_0-1682471286623.png

 

 

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
10241 2036 2106

This is an accepted solution.

Hi @hobbyzoneuk you can solve the space between images in your product description by adding CSS code below at the bottom of base.css in your store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css 

.product .color-background-1 .page-width > div {
display: grid;
gap: 0;
justify-content: center;
}

This is the result 

Screenshot 2023-04-26 at 09.22.05.png

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

PageFly-Richard
Shopify Partner
4782 1082 1749

This is an accepted solution.

Hi @hobbyzoneuk 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
img[style="float: none;"] {
    display: block;
    margin: 0 auto;
}
</style>

PageFlyRichard_0-1682476033910.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 4 (4)

dynextic
Shopify Partner
1 0 0

Hi, How are you doing?

To remove the spacing between product images in product description section, you will need to edit the CSS code in your Shopify theme. In the theme editor, locate the CSS file containing the code related to the product description section.

Look for any lines of code that containmargin orpadding and change the values to0.

This will remove any spaces between the images. To auto resize the images in product description for mobile, you will need to add a media query to the CSS code. This will allow the images to display in different sizes on different devices.

To do this, add the following code to the CSS file: @media only screen and

 

(max-width: 600px) { img { width: 100%; } }

This code will ensure that all images in the product description section will automatically resize to fit the width of the device.

 

If you need further assistance to getting this done, You can contact me at dynextic@gmail.com

banned
Dan-From-Ryviu
Shopify Partner
10241 2036 2106

This is an accepted solution.

Hi @hobbyzoneuk you can solve the space between images in your product description by adding CSS code below at the bottom of base.css in your store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css 

.product .color-background-1 .page-width > div {
display: grid;
gap: 0;
justify-content: center;
}

This is the result 

Screenshot 2023-04-26 at 09.22.05.png

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Zupun
Visitor
1 0 0

Hi, I'm having the same issue and using the dawn theme. But, this solution didn't work for my store. Is there anything needs to be changed? Thank You!

PageFly-Richard
Shopify Partner
4782 1082 1749

This is an accepted solution.

Hi @hobbyzoneuk 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
img[style="float: none;"] {
    display: block;
    margin: 0 auto;
}
</style>

PageFlyRichard_0-1682476033910.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.