How to remove spacing between images in product description

[hobbyzoneuk]

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.

[Dan-From-Ryviu · 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 

[dynextic]

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 contain “margin” or “padding” and change the values to “0”.

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

[Dan-From-Ryviu · 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 

[Zupun]

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 · 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>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly